Javascript 无法通过在实现accordian时创建的动态id编辑html

我正在从api响应数据创建动态html表。 然后，我试图通过另一个api响应获取每行文本的信息。 我想把这个响应显示为jquery accordian。 但这需要为div标记分配动态id（和行的文本相同）。但当我试图通过jquery修改div内容时，屏幕上什么也没有发生

<style>
    button.accordion {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
    }

    button.accordion.active, button.accordion:hover {
        background-color: #ddd;
    }

    div.panel {
        padding: 0 18px;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }

</style>


<table>
<thead>
<tr>
<th>Key</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>


function populateTable(data) {

        $('#tbody').html("");
        for (var key in data) {
    var eachrow = '<tr>'
                +'<td><button id="'+ key+'" class="accordion" onclick="accod()">'+ key+'</button>'
        +'<div class="panel" id="'+key+'_panel">'
                +'<p>Some Text.</p></div>'+ '</td>'
                + '</tr>';
            $('#tbody').append(eachrow);
    }
}

function accod() {
        var acc = document.getElementsByClassName("accordion");
        $('button.accordion').on('click', function(e) {
            console.log(this.id);
            getData(""+this.id);
        });

        var i;

        for (i = 0; i < acc.length; i++) {
            acc[i].onclick = function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.maxHeight){
                    panel.style.maxHeight = null;
                } else {
                    panel.style.maxHeight = 200 + "px";
                }
            }
        }

    }


function getData(key){

        $.getJSON("getData", {key :key}, function(data) {

            populate(key, data);

        });

    }

function populate(key, data) {

    var panel="#"+key+"_panel"; 
        $(panel).html("");
        $.each(data, function (index, item) {
            var eachrow = item + "<br>";
             $(panel).append(eachrow);
        });

    }

手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
按钮。手风琴。激活，按钮。手风琴：悬停{
背景色：#ddd；
}
分区小组{
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
钥匙
函数populateTable（数据）{
$（'#tbody'）.html（“”）；
for（var输入数据）{
变量eachrow=''
+''+键+''
+''
+“一些文本。
”+“
+ '';
$（“#tbody”）.append（如下所示）；
}
}
函数accod（）{
var acc=document.getElementsByClassName（“accordion”）；
$（'button.accordion'）。打开（'click'，函数（e）{
console.log（this.id）；
getData（“+this.id”）；
});
var i；
对于（i=0；i”；
$（面板）。追加（每个箭头）；
});
}

---

第二个api响应如预期的那样出现，但它没有显示在div中。

因为我们无法访问您的api，为了正确地重现此响应，我们需要一个从api返回的给定密钥的数据示例。如果有大量数据，只需一个小样本就足够了，足以重新创建问题。api响应是字符串数组，如[app.prop、app_en.prop、app_es.prop、app_fr.prop]如何触发“populateTable（data）”，以及当时“data”的内容是什么？我们也需要它来重现这个问题。否则，我们无法看到您试图将API调用的结果插入其中的HTML是什么样子。