Collapsing Rows using bootstrap - dynamically large table

I am creating a table that I want to have collapsing detail on each row. I am able to get this working for the first row of the table, but for every row after this, the button does not toggle. My code is below. I know I am probably missing something very simple here, but I am fairly new to web development. Any help is appreciated.

.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");
                            }
                        }); 

My table is declared in another .jsp file, but I do not think this code is needed for a solution. Also to mention, this loop is inside an AJAX call in my .js file.

Thanks!