如何在JavaScript中获得附加accodian

我从firebase数据库中获取公司，并使用javascript将其附加到html中。这是代码

function loadcompanies() {
    var leadsRef = database.ref('companies');
    leadsRef.on('value', function(snapshot) {
        if (snapshot.exists()) {
            var content = '';
            snapshot.forEach(function(childSnapshot) {
                var childData = childSnapshot.val();

                content +=   '<tr class="header" class="clickable">';
                //content +=    '<tr class="header">';
                content +=  '<td style="width: 55px; color: #42957F">'+childData.rooms+'</td>';
                content +=  '<td id="companyName" onclick="getrooms(this)"  data-toggle="collapse" data-target="#accordion1" style="width: 102px; font-weight: bold">'+childData.company+'</td>';
                content +=  '<td style="width: 60px;">'+childData.code+'</td>';
                content +=  '<td><a href="#" style="font-size:18px;" onclick="addroom(this)" data-toggle="modal" data-target="#myModal" id="addMore" title="Add More Person"><i class="fas fa-plus-circle plus"></i></a>Add Rooms';
                content +=  '</td>';
                content +=  '</tr>';

                //companyName.innerHTML += '<div>'+childData.company+'</div>';
                //document.getElementById("companyName").innerHTML = childData.company;

                //alert(childData.company);
                console.log(childData.rooms.length);
            });
            $('#abctable').append(content);
        }
    });
}

function getrooms(x) {
    name = $(x).closest('tr').find('#companyName').text();
    //var rowIndex = $(x).closest('tr').index();
    var leadsRef= database.ref('companies/' + name + '/nrooms');
    leadsRef.on('value', function(snapshot) {
        if (snapshot.exists()) {
            var content= '';
            snapshot.forEach(function(Snapshot){
                var childData= Snapshot.val();
                var key = Snapshot.key;
                content+=  '<tr style="background-color: #F2F2F2; color: #42957F">';
                content+=  '<td style="background-color: none" id="accordion1" class="collapse"></td>';
                content+=  '<td id="accordion1" class="collapse"></td>';
                content+=  '<td id="accordion1" class="collapse"></td>';
                content+=  '<td style="width: 170px;" id="accordion1" class="collapse">'+key+'</td>';
                content+=  ' <td style="width: 250px; font-size: 13px;" id="accordion1" class="collapse">'+childData.roombeacon.uuid+'</td>';
                content+=  '<td style="width: 90px;" id="accordion1" class="collapse">'+childData.roombeacon.major+'</td>';
                content+=  ' <td style="width: 100px;" id="accordion1" class="collapse">'+childData.roombeacon.minor+'</td>';
                content+=  ' <td style="width: 110px;" id="accordion1" class="collapse">'+childData.roombeacon.enter+'</td>';
                content+=  ' <td style="width: 85px;" id="accordion1" class="collapse">'+childData.roombeacon.docking+'</td>';
                content+=  '<td style="width: 45px;" id="accordion1" class="collapse">'+childData.roombeacon.tx+'</td>';
                content+=  '  <td style="font-size: 13px; width: 195px; margin-left:50px;" id="accordion1" class="collapse">'+childData.dockbeacon.uuid+'</td>';
                content+=  '   <td style=" width: 80px;" id="accordion1" class="collapse">'+childData.dockbeacon.major+'</td>';
                content+=  '   <td style="width: 110px;" id="accordion1" class="collapse">'+childData.dockbeacon.minor+'</td>';
                content+=  '   <td style="width: 110px;" id="accordion1" class="collapse">'+childData.dockbeacon.tx+'</td>';
                content+=  ' </tr>';
                console.log(childData.roombeacon.length);
                console.log(childData);
            });
            $('#abctable').append(content);
        }
    });
    // alert(name);
}

问题是，我写的这个程序没有正确运行，就像每个房间都没有在公司加载一样。它在所有公司的监听结束时打印，当我多次单击该公司时，它不会关闭相应的并继续打印数据库中的值

---

这是当我单击Devstop时它给我的信息，它应该在Devstop行之后打印。在多次单击Devstop时，它会多次打印行，

我想根本原因是HTML中共享的重复id属性

以下面的例子为例，循环中的每个元素都共享相同的id属性，这会导致意外结果

 forEach{
          <td id="companyName">
 }


   forEach{


      <td id="accordion1">
  }

forEach{
}
弗雷奇{
}

上面的代码嵌套在forEach循环中，因此会生成共享相同id的元素

HTML不允许使用同一id分配多个元素

您的代码有太多这样的错误。 我希望下面的代码示例会给您一些启示，您可以通过将当前循环索引附加到每个id来区分它们

var content = "";
snapshot.forEach(function(childSnapshot, index) {
  content += '<td id="companyName' + index + '">';
});

var content=”“；
forEach（函数（childSnapshot，索引）{
内容+=''；
});

我知道此代码有错误，这就是我将其发布在此处的原因。请确保在for循环中，将要设置id属性的任何元素都设置为唯一id，然后一切都会正常工作。如何操作？如何在foreach中设置不同的id？更新了答案