JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<table id="table1" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <th style="width:150px">Product</th>
        <th>Price ($)</th>
        <th>Quantity</th>
        <th>Amount ($)</th>
    </tr>

    <tbody data-bind='template: {name: "orderTemplate", foreach: lines}'></tbody>
</table>

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
<script type="text/html" id="orderTemplate">
    <tr>
        <td><select data-bind="options: products, 
                               optionsText: 'name',
                                value: product">
                               </select>
        </td>
        <td><span data-bind="text: product().price" /></td>
        <td><input data-bind="value: product().quantity" /></td>
        <td><span data-bind="text: product().total" /></td>
    </tr>
</script>

JavaScript

var _products = [
      new Product({
          "name": "1948 Porsche 356-A Roadster",
          "price": 53.9
          , quantity: 1
      }),
      new Product({
          "name": "1948 Porsche Type 356 Roadster",
          "price": 62.16
          , quantity: 1
      }),
      new Product({
          "name": "1949 Jaguar XK 120",
          "price": 47.25
          , quantity: 1
      }),
      new Product({
          "name": "1952 Alpine Renault 1300",
          "price": 98.58
          , quantity: 1
      }),
      new Product({
          "name": "1952 Citroen-15CV",
          "price": 72.82
          , quantity: 1
      }),
      new Product({
          "name": "1956 Porsche 356A Coupe",
          "price": 98.3
          , quantity: 1
      }),
      new Product({
          "name": "1957 Corvette Convertible",
          "price": 69.93
          , quantity: 1
      })];

    function formatCurrency(value) {
        return "$" + value.toFixed(2);
    }
function Product(data){
    data = data || {};
    var self = this;
    self.name = ko.observable(data.name || "");
    self.price = ko.observable(data.price || "0");
    self.quantity = ko.observable(data.quantity || "0");
    self.total = ko.computed(function(){
        return self.price() * self.quantity();
    });
}

    var CartLine = function () {
        var self = this;
        self.products = ko.observableArray(_products);
        self.product = ko.observable(1);
        self.quantity = ko.observable(1);
        self.price = ko.observable(1);

    };

    var Cart = function () {
        // Stores an array of lines, and from these, can work out the grandTotal
        var self = this;
        self.lines = ko.observableArray([new CartLine()]); // Put one line in by default
    };

    ko.applyBindings(new Cart());