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

I am having trouble figuring out how to expand a specific tbody when I click the chevron in the thead. Their are four tables created by a PHP foreach loop so when I click the chevron all the tbodies are expanded. Everything I have found is related to Knockout's foreach binding which I am not using. Any solution to this problem? My 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; ?>

My 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());
        }
    }
});