Uncaught ReferenceError: clickDone is not defined at HTMLSpanElement.onclick (home.html:1)

In my web app, a user can create a classroom and then it will be save to the firebase database. After that, the newly created classroom and along with the old class will be retrieve and store in the Classroom: as shown in the image

All the classroom on the list can be click and should show the details of it like: Classroom ID, Teacher, Students. But whenever I do that, an error would appear on the console log

This is the code:

var userRef = firebase.database().ref().child('Classes' + '/' + user.uid);
userRef.on('child_added', function(data) {

var roomNames = data.val().TheClass;
var titsNames = data.val().Teacher;
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[key]+'</li><li>Teacher : '+titsNames[key]+'</li> 
</ul>';

  });

  function clickDone(thisVar){
    var is = thisVar.nextSibling.style.display;
    if(is == 'none'){
      thisVar.nextSibling.style.display = 'initial';
    }else{
      thisVar.nextSibling.style.display = 'none';
    }
  }

 });

What went wrong? What did I miss? Any help from you would be greatly appreciated.