我尝试创建一个网站，在那里我可以搜索一个特定的产品与最便宜的供应商。我能够从数据库中提取数据与Elastichsearch和jQuery Ajax获得数据库。

<script>
    $('.js-ajax').select2({
        ajax: {
            url: '/product/api/elasticsearch',
            dataType: 'json',
            width: 'resolve', // need to override the changed default
            minimumResultsForSearch: -1,
            dropdownCssClass: 'select2-hidden',

            success: function (data) {
                var returnedData = data;
                // clear table
                $('#products tbody').empty();

                for(let i = 0; i < returnedData.results.length; i++){
                    $("#products").find('tbody')
                        .append($('<tr>')
                            .append($('<td>')
                                .text(returnedData.results[i].id)
                            )

                            .append($('<td class="columt">')
                                .text(returnedData.results[i].text)
                            )

                            .mouseover(returnedData.results[1].text)

                            .append($('<td class="columnp">')
                                .text(returnedData.results[i].sku)
                            )
                            .append($('<td class="colum7">')
                                .text(returnedData.results[i].vendor)
                            )
                        );
                }
            }
        }
    });
</script>

我可以把响应放在一个表中，但是我如何把响应放在一个折叠表中呢？我想我必须创建一个foreach循环，并标记每个产品。
我试过了，但是没有用

function addProducts(products) {
  products.forEach(fucntion(product) {
                   var template = $('#products').text();//get template
                    template = template.replace('{id}', product.id);//replace placeholders to data
                    template = template.replace('{title}', product.title);
                    template = template.replace('{price}', product.id);
                    //...other data
                    $('#search-result').append(template);//add to box
                    bindProduct(product.id);//add event  
                   });
}

function bindProduct(productID) {
  $('#'+productID).on('mouseover', function() {//or another event
    showPopup();//justs add opened class or what you want
  });
}

上面的代码有一个语法错误，我找不到。
第一个想法是把数据放在表与鼠标悬停。但由于这将不会工作的预期在一个小屏幕上，我决定把数据在折叠，但我卡住了