Rendering a nested Bootsrap accordion from dynamic json data

I am trying to load dynamic json objects from firebase and populate a nested bootstrap accordion. The scenario: albums and songs for simplicity each has only "title". Meaning main accordion of albums and for each album nested accordion of songs.

I am using the mustache templating library with partials. A template for album item and another for song item. So far only the albums appear as the first level and i need help in achieving the nested functionality. Please gentle with me as I am normally not a web developer. Thanks for looking!

    //here i have both template files the header and subitem these are nested 
    bootstrap accordion
     <script id="heading" type="text/x-custom-template">
        <div class="panel panel-default">

    <!--               panel heading-->
                <div class="panel-heading">
                  <h4 class="panel-title">
                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#" id="">
                    
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="" class="panel-collapse collapse">
                  <div class="panel-body" id="body">
                  
                 
                  
                    <!-- nested items -->
           `enter code here`<!-- nested -->                   
                 </div><!--/.panel-body -->
                   </div><!--/.panel-collapse -->
                </div><!-- /.panel -->
    </script>

 <script id="subItem" type="text/x-custom-template" >
      <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#">
                    
                     </a>
            `enter code here`      </h4>
               </div><!--/.panel-heading -->
               <div id="" class="panel-collapse collapse">
                  <div class="panel-body">
                   bla bla bla
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->
    </script>



//here is the function to load the data: the idea: for each album item render accordions as the number of songs

 function loadData()

    {
      var ref = firebase.app().database().ref();
   var i=0;
    ref.child("music").child($('#language_selector option:selected').text()).on("value", function(snapshot) {

    console.log(snapshot.val());
   //for each album 
   snapshot.forEach(function(data) {

        var album=data.val();
        var songs =album.songs;
        var array=[];
       Object.keys(songs).forEach(function(key) {
        value = songs[key];
          array.push(value);
     });
      //get the songs
        var data={songs:array,title:album.title,id:i};
       // var data={title:album.title,id:i};

          var header = $('#heading').html();
          var userTemplate=$('#subItem').html();
         Mustache.parse(header);
         var ht = Mustache.render(header, data,  {
         song: userTemplate
    });
        $('#accordion').append(ht); 
     i++;
    });
}); 
  }
});