JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <th>Cust ID</th>
        <th>ID</th>
        <th>Product</th>
        <th>Qty</th>
        <th>Price</th>
    </thead>
    <tbody data-bind="foreach: items">    
        <tr data-bind="click: $parent.edit">           
            <td data-bind="html: custid"></td>
            <td data-bind="html: id"></td>
            <td data-bind="html: product"></td>
            <td data-bind="html: qty"></td>
            <td style="text-align: right" data-bind="html: price"></td>
        </tr>
    </tbody>
</table>

<!-- ko foreach: selectedItem -->
<div>
    <div id="editBox">
        <h3>Edit Item</h3>        
        <input data-bind="value: custid" type="text"><br/>
        <input data-bind="value: id" type="text"><br/>
        <input data-bind="value: product" type="text"><br/>
        <input data-bind="value: qty" type="text"><br/>
        <input data-bind="value: price" type="text"><br/>
        <button data-bind="click: $parent.save" class="btn">Save</button>
    </div>
</div>
<!-- /ko -->

JavaScript

var orders = [    {
        "product": "product 1",
        "id": "7556",
        "custid": "21",
        "qty": "1",
        "price": "19.99"
    },    {
        "product": "product 2",
        "id": "7557",
        "custid": "22",
        "qty": "1",
        "price": "29.99"
    },    {
        "product": "product 3",
        "id": "7558",
        "custid": "23",
        "qty": "1",
        "price": "39.99"
    },];
              
               function AppViewModel() {
              var self = this;
              self.items = ko.observableArray(orders);
              self.selectedItem = ko.observableArray([]);
              
              self.save = function(item){
                  console.log(item);
              }
              
              self.edit = function(item){                  
                  self.selectedItem(item);
              }
              
              }
              ko.applyBindings(new AppViewModel());