使用引导程序折叠行 - 动态大型表 - 仅第一行折叠

Question

我正在创建一个表格，我想要在每一行上折叠细节。我能够在表的第一行行中使用它，但对于此后的每一行，该按钮不会切换。我的代码如下。我知道我可能在这里遗漏了一些非常简单的东西，但我对网络开发还是比较陌生的。任何帮助表示赞赏。

的.js

for (var z=0;z<documentData.length;z++) {
                    $("#documents-result-table > tbody").append(
                        "<tr>" + 
                            "<td>" + documentData[z].documentIdocNumber + "</td>" +
                            "<td>" + documentData[z].docNumber + "</td>" +
                            "<td>" + documentData[z].documentType + "</td>" +
                            "<td>" + documentData[z].status + "</td>" +
                            "<td>" + documentData[z].createdDate + "</td>" +
                            "<td>" + documentData[z].modifiedDate + "</td>" +                               
                            "<td>" + documentData[z].customerId + "</td>" +
                            "<td>" + documentData[z].customerName + "</td>" +
                            "<td><a target=\"_blank\" href=\"" + contextPath + "/viewPdf.do?documentIdocNumber=" + documentData[z].documentIdocNumber + "\" class=\"glyphicon glyphicon-eye-open\"></a></td>" +
                            "<td><a target=\"_blank\" href=\"" + contextPath + "/saveBak.do?documentIdocNumber=" + documentData[z].documentIdocNumber + "\" class=\"glyphicon glyphicon-floppy-save\"></a></td></tr>"
                            + "<tr class=\"collapse\" id=\"collapseme\">" +
                            "<td></td><td colspan=\"9\"><table  class=\"table table-striped table-curved\"><tr><th>Customer Id</th><th>Customer Name</th><th>Billing Plant</th><th>Country Code</th><th>Routing Code</th><th>Language</th></tr>" +
                            "<tr>" +
                            "<td>" + documentData[z].customerId + "</td>" +
                            "<td>" + documentData[z].customerName + "</td>" +
                            "<td>" + documentData[z].billingPlant + "</td>" +
                            "<td>" + documentData[z].countryCode + "</td>" +
                            "<td>" + documentData[z].routingCode + "</td>" +
                            "<td>" + documentData[z].language + "</td></tr>" +
                            "</table></td></tr>");

                        $('.collapse').collapse({toggle: false});
                        $('button span').click(function() {
                            $("#collapseme").collapse("toggle");
                            var span = $('button span').hasClass('glyphicon-chevron-down');
                            if(span){
                                $(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
                            }
                            else{      
                                $(".glyphicon-chevron-right").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
                            }
                        }); 

我的表在另一个.jsp文件中声明，但我不认为解决方案需要此代码。另外要说的是，这个循环位于我的.js文件中的AJAX调用中。

谢谢！