Javascript 在foreach:knockoutjs中创建动态属性时出现问题

我在用手风琴显示数据时遇到问题，如图所示

无论单击哪一行，都会显示相同的“隐藏行”。我明白为什么。。。下一行设置accordian元素的目标

<tr data-toggle="collapse" data-target="#demo1"  class="accordion-toggle">

不知何故，我需要使“#demo1”独一无二，并使隐藏行也独一无二

下面是代码：我如何确保每一行都有自己唯一的目标id，以及隐藏的行

谢谢

身份证件
第一
最后的
电子邮件
电话
行动
地址1
地址2
城市
状态
邮政编码

您应该确保

数据目标和匹配的隐藏行
id
对于每一行都是唯一的。您可以使用数据绑定来动态设置这些属性，并利用绑定的
$index
上下文可观察属性来构造唯一的匹配值

例如，这可能导致数据目标出现
data bind=“attr:{'data target'：'#demo'+$index（）}”
，匹配的隐藏行id出现
data bind=“attr:{id:'demo'+$index（）}”
。请看下面的简化示例：


ko.applyBindings({
客户：[{}，{}，{}，{}，{}]
});

身份证件
第一
最后的
电子邮件
电话
行动
单击以切换
地址1
地址2
城市
状态
邮政编码
...
很好的解决方案，菲利普！这是一个非常聪明的技巧，对我来说非常适合。非常感谢。
<table class="table table-striped table-bordered notranslate">
   <thead>
      <tr>
         <th style="width: 10%">ID</th>
         <th>First</th>
         <th>Last</th>
         <th>Email</th>
         <th>Phone</th>
         <th>Actions</th>
      </tr>
   </thead>
   <tbody data-bind="foreach: customers">
      <tr data-toggle="collapse" data-target="#demo1"  class="accordion-toggle">
         <td>
            <i class="fa fa-plus" style="cursor: pointer"></i>
         </td>
         <td data-bind="text: firstName"></td>
         <td data-bind="text: lastName"></td>
         <td data-bind="text: email"></td>
         <td data-bind="text: phone"></td>
         <td>  <i class="fa fa-pencil mr-1" data-bind="click: $root.editCustomer"></i> <i class="fa fa-trash mr-1" data-bind="click: $root.deleteCustomer"></i></td>
      </tr>
      <tr>
         <td colspan="6" class="hiddenRow">
            <div class="accordian-body collapse" id="demo1"  >
               <table class="" style="background-color: lightyellow; width: 100%;">
                  <tbody>
                     <tr>
                        <th>Address 1</th>
                        <th>Address 2</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Zip Code</th>
                     </tr>
                     <tr>
                        <td data-bind="text: address1"></td>
                        <td data-bind="text: address2"></td>
                        <td data-bind="text: city"></td>
                        <td data-bind="text: state"></td>
                        <td data-bind="text: zip"></td>
                     </tr>
               </table>
            </div>
         </td>
      </tr>
   </tbody>
</table>