JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: list">
        <tr>
            <td data-bind="text: Name"></td>
            <td>
                <button class="btn btn-xs btn-primary" data-bind="click: $root.edit">edit</button>
            </td>
        </tr>
    </tbody>
</table>

<h3>Add</h3>

<form data-bind="with: selected">Name:
    <input type="text" data-bind="value: Name" />
</form>
<button data-bind="click: $root.add">Add New Factory</button>

JavaScript

var ViewModel = function (data) {
     var self = this;
     self.list = ko.observableArray(data);
     self.selected = ko.observable();

     self.add = function () {
         self.selected();
     }

     self.create = function (formElement) {
         $(formElement).validate();
         if ($(formElement).valid()) {
             $.post(baseUri, $(formElement).serialize(), null, "json")
                 .done(function (o) {
                 self.list.push(o);
             });
         }
     }

     self.edit = function (o) {
         self.selected(o);
     }

     self.update = function (o) {
         $.ajax({
             type: "PUT",
             url: baseUri + '/' + o.Id,
             data: o
         });
     }

     self.cancel = function (o) {
         self.selected(null);
     }

     self.remove = function (o) {
         $.ajax({
             type: "DELETE",
             url: baseUri + '/' + o.Id
         })
             .done(function () {
             self.list.remove(o);
         });
     }

 };

 var viewModel;
 $(function () {
     $.getJSON(baseUri, null, function (data) {
         //adding this for data
         data = "[{Id:1,Name:'A'},{Id:2,Name:'B'}]";
         viewModel = new ViewModel(data);
         ko.applyBindings(viewModel);
         viewModel.selected(null);
     });

 });