How to make a List within a List?

So in the web app I'm trying to make, there are two types of users: Teacher and Student

Teacher
- Can create classrooms
- Can view Students who joined his/her classroom/s

Student
- Can join a classroom/s created by a Teacher
- Can view the classroom and classmates who joined the same room

For the Teacher, I used these codes to create classrooms :

function classcreation(q)
{
    var usuid = generateId();
    var myClasses={};
    myClasses.TheClass = document.getElementById('classroomName').value;
    myClasses.Teacher = user.displayName;
    myClasses.TeacherID = user.uid;
    myClasses.ClassID = usuid;
    fbclass.child(user.uid).push().set(myClasses);
}

and these codes for Students to join a classroom

function addclass(){
       var addclassID = document.getElementById("classroomID").value;
       var teacherUID =document.getElementById("teachID").value;
       var studentUID = user.uid;
       var studentName = user.displayName;
       var classRef = 
           firebase.database().ref().child('Classes').child(teacherUID);

           classRef.orderByChild("ClassID").equalTo(addclassID)
           .once("child_added", function(snapshot) {
            var studentsRef = snapshot.ref.child("MyStudents");
            studentsRef.child(studentUID).set({ Studentname: studentName });
       });

These codes right here allows the Teacher to view his/her created classroom

  var userRef = firebase.database().ref().child('Classes' + '/' + user.uid);
        userRef.on('child_added', function(data)
        {
              var roomNames = data.val().TheClass;
              var Studentx = data.val().MyStudents;
              var classD = data.val().ClassID;
              var ul = document.createElement('ul');
              document.getElementById('myList').appendChild(ul);
              var li = document.createElement('li');
              ul.appendChild(li);

              Object.keys(roomNames).forEach(function(key){
              li.innerHTML += '<span onclick="clickDone(this)">'
                              +roomNames[key]+'</span>
                              <ul style="display:none">
                              <li>Class Id : '+classD+'</li>
                              <li>Students : '+Studentx+'</li></ul>';
                });
              });

What my JSON looks like

{
  "Accounts" : {
    "FykyhzEZjndylFj3BbCnPqoTGDo1" : {
      "displayName" : "Dodong Advices",
      "email" : "advicenidodong@gmail.com",
      "status" : "Teacher"
    },
    "HOgdSlTed9V8g0kSZjizgODMDOe2" : {
      "displayName" : "Sweet Macaroni",
      "email" : "Sweet@gmail.com",
      "status" : "Student"
    },
    "yJif4ReTxCcGmo682xWSG3L5MKE3" : {
      "displayName" : "Purple Salad",
      "email" : "Purple@gmail.com",
      "status" : "Student"
    }
  },
  "Classes" : {
    "FykyhzEZjndylFj3BbCnPqoTGDo1" : {
      "-LMpvlBl3mEazhxaJwqb" : {
        "ClassID" : "6503-3503-6827",
        "Teacher" : "Dodong Advices",
        "TeacherID" : "FykyhzEZjndylFj3BbCnPqoTGDo1",
        "TheClass" : "StackMates"
      },
      "-LMrfIBg8v-hj1k8X2Qf" : {
        "ClassID" : "7583-2402-2757",
        "MyStudents" : {
          "HOgdSlTed9V8g0kSZjizgODMDOe2" : {
            "Studentname" : "Sweet Macaroni"
          }
        },
        "Teacher" : "Dodong Advices",
        "TeacherID" : "FykyhzEZjndylFj3BbCnPqoTGDo1",
        "TheClass" : "asdasd"
      },
      "-LMrfMV1aw3YNA0PfooR" : {
        "ClassID" : "8083-2712-3347",
        "MyStudents" : {
          "HOgdSlTed9V8g0kSZjizgODMDOe2" : {
            "Studentname" : "Sweet Macaroni"
          },
          "yJif4ReTxCcGmo682xWSG3L5MKE3" : {
            "Studentname" : "Purple Salad"
          }
        },
        "Teacher" : "Dodong Advices",
        "TeacherID" : "FykyhzEZjndylFj3BbCnPqoTGDo1",
        "TheClass" : "Trial"
      }
    }
  }
 }

Based on the JSON we can see that we have 3 users. Purple Salad, Sweet Macaroni (both are students) and a Teacher named Dodong Advices.

So Dodong Advices have 3 classrooms: StackMates, asdasd and Trial

In the class StackMates, Dodong Advices doesn't have a student but in the class asdasd he has one, named Sweet Macaroni and 2 students in the class Trial

The codes below allows user Dodong Advices to view the classrooms he created.

  li.innerHTML += '<span onclick="clickDone(this)">
                  '+roomNames[key]+'</span> 
                   <ul style="display:none">
                   <li>Class Id : '+classD+'</li>
                   <li>Students : '+Studentx+'</li></ul>';

but not the students who joined one of his classrooms.

The image above is the result

I tried using this code to show the list of classrooms and the list of students inside each classrooms:

  li.innerHTML +='<span onclick="clickDone(this)">'+roomNames[key]+'</span> 
                   <ul style="display:none"><li>Class Id : '+classD+'</li> 
                   <li><span onclick="clickDone(this)">Students : </span>
                   <ul style="display:none"><li>'+Studentx[key]+' </li></li> 
                   </ul>';

But it didn't worked. What is the best solution for this? I really need your help :(