无法通过实现手风琴时创建的动态ID来编辑html

Question

我正在从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);
        });

    }

第二个api响应按预期进行，但它没有显示在div中。