单击复选框时，使用jQuery和JSON动态显示引导手风琴

Question

我使用jQuery从JSON动态显示表值。我想要完成的是，如果用户选择了错误列，则会在所选行的下方显示一个下拉列表。我正在使用bootstrap手风琴来显示新行。

这是使用我在上一个问题http://jsfiddle.net/2Dj7Y/1582/

中找到的这个jsfiddle的方法

$(document).ready(function () {
    var json = [{"itemNo":"1","itemsToCheck":"Air Recharge Rates","P":"","F":"","defectDescription":"","inspectionCriteria":"Should be less than 4 minutes"},{"itemNo":"2","itemsToCheck":"Governor Cut In","P":"","F":"","defectDescription":"","inspectionCriteria":"Approximately 105 psi"},{"itemNo":"3","itemsToCheck":"Goveror Cut-Out & Air Dryer Purging","P":"","F":"","defectDescription":"","inspectionCriteria":"Dryer purges upon governor cutout pressure @ approx 125 psi"},{"itemNo":"4","itemsToCheck":"Low Air Alarm","P":"","F":"","defectDescription":"","inspectionCriteria":"Audible and visual indication engages at approx. 35-45 psi"},{"itemNo":"5","itemsToCheck":"Parking Brake Safety App","P":"","F":"","defectDescription":"","inspectionCriteria":"Parking brake automatically engages at approx. 35-45 psi"}];
    var tr;
    var hiddentr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">');
        tr.append("<td>" + json[i].itemNo + "</td>");
        tr.append("<td>" + json[i].itemsToCheck + "</td>");
        tr.append('<td><div class="checkbox form-checkbox"><label><input type="checkbox" id="checkboxPass" value="'+json.P+'"></label></div></td>');
        tr.append('<td><div class="checkbox form-checkbox"><label><input data-toggle="collapse" data-target="#demo1" class="accordion-toggle" type="checkbox" value="'+json.F+'"></label></div></td>');
        tr.append("<td>" + json[i].defectDescription + "</td>");
        tr.append("<td>" + json[i].inspectionCriteria + "</td>");
        tr.append("</tr>");
        $('#airSystemTable').append(tr);
        hiddentr = $('<tr>');
        hiddentr.append('<td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1 </div> </td>');
        hiddentr.append('</tr>');
        $('#airSystemTable').append(hiddentr);
    }

}）;

当用户点击该行时出现此问题，只显示第一行下方的行，因为它们都会映射到id =＆＃34; demo1＆＃34;

所以我尝试动态更改演示编号，以便它适用于所有点击的行

$(document).ready(function () {
    var json = [{"itemNo":"1","itemsToCheck":"Air Recharge Rates","P":"","F":"","defectDescription":"","inspectionCriteria":"Should be less than 4 minutes"},{"itemNo":"2","itemsToCheck":"Governor Cut In","P":"","F":"","defectDescription":"","inspectionCriteria":"Approximately 105 psi"},{"itemNo":"3","itemsToCheck":"Goveror Cut-Out & Air Dryer Purging","P":"","F":"","defectDescription":"","inspectionCriteria":"Dryer purges upon governor cutout pressure @ approx 125 psi"},{"itemNo":"4","itemsToCheck":"Low Air Alarm","P":"","F":"","defectDescription":"","inspectionCriteria":"Audible and visual indication engages at approx. 35-45 psi"},{"itemNo":"5","itemsToCheck":"Parking Brake Safety App","P":"","F":"","defectDescription":"","inspectionCriteria":"Parking brake automatically engages at approx. 35-45 psi"}];
    var tr;
    var hiddentr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr data-toggle="collapse" data-target="#demo'+(i+1)+'" class="accordion-toggle">');
        tr.append("<td>" + json[i].itemNo + "</td>");
        tr.append("<td>" + json[i].itemsToCheck + "</td>");
        tr.append('<td><div class="checkbox form-checkbox"><label><input type="checkbox" id="checkboxPass" value="'+json.P+'"></label></div></td>');
        tr.append('<td><div class="checkbox form-checkbox"><label><input data-toggle="collapse" data-target="#demo'+(i+1)+'" class="accordion-toggle" type="checkbox" value="'+json.F+'"></label></div></td>');
        tr.append("<td>" + json[i].defectDescription + "</td>");
        tr.append("<td>" + json[i].inspectionCriteria + "</td>");
        tr.append("</tr>");
        $('#airSystemTable').append(tr);
        hiddentr = $('<tr>');
        hiddentr.append('<td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="#demo'+(i+1)+'"> Demo1 </div> </td>');
        hiddentr.append('</tr>');
        $('#airSystemTable').append(hiddentr);
    }

}）;

最终我想让它在用户检查故障框时工作，但只是让它立即工作，就像我以前的jsfiddle一样。

任何帮助将不胜感激，谢谢。