在php foreach循环中使用knockout js定位特定元素

Question

当我点击thead中的V形符号时，我无法弄清楚如何扩展特定的tbody。它们是由PHP foreach循环创建的四个表，所以当我点击V形符号时，所有的tbodies都会被展开。我发现的一切都与Knockout的foreach绑定有关，我没有使用它。任何解决这个问题的方法？ 我的PHTML

<?php foreach($categoryArray as $value): ?>
    <table class="buyback-table" data-bind="scope: 'buyback'">
        <thead>
            <tr>
                <th colspan="3">Category Name</th>
                <th class="text-right"><i type="button" class="fa fa-chevron-down" data-bind="css: { expanded: expand }, click: toggleTable" data-target="#row-<?php echo ++$i; ?>"></i></th>
            </tr>
        </thead>
        <tbody class="product-table" id="row-<?php echo $i ?>" data-bind="fadeVisible: showTable">
            <tr class="heading">
                <th colspan="2">Product</th>
                <th class="text-right">Buy Price</th>
                <th class="text-right"><span>Sell Price</span></th>
            </tr>
            <?php foreach($productArray as $value): ?>
                <tr class="item-wrapper">
                    <td>img</td>
                    <td><?php echo $value; ?></td>
                    <td class="text-right">$0.00</td>
                    <td class="text-right">$1000000.00</td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
<?php endforeach; ?>

我的JS：

define(['ko'], function(ko) {
    return function() {
        this.showTable = ko.observable(false);
        this.expand = ko.observable(false);

        this.toggleTable = function() {
            this.expand(!this.expand());
            this.showTable(!this.showTable());
        }
    }
});