JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<table border="1" data-bind="visible: $root.list().length > 0">
    <thead>
        <tr>
            <th>Name</th>
            <th>#</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: $root.list">
        <tr>
            <td>
                <span data-bind="text: name, visible: ! isEdited()"></span>
                <input data-bind="value: name, visible: isEdited()"/>
            </td>
            <td>
                <button class="btn btn-xs btn-success" data-bind="click: $root.save, visible: isEdited()">Save</button>
                <button class="btn btn-xs btn-warning" data-bind="click: $root.toggleEdit, text: isEdited() ? 'Cancel' : 'Edit'"></button>
                <button class="btn btn-xs btn-danger" data-bind="click: $root.delete">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

<h3>Add</h3>
<input data-bind="value: $root.newFactory"/>
<button data-bind="click: $root.addNewFactory">Add New Factory</button>

JavaScript

function mapFactory(factory)
{
    var self = this;
    self.name = ko.observable(factory.name);
    self.isEdited = ko.observable(false);
};

var ViewModel = function (data) {
    var self = this;
    self.list = ko.observableArray();
    
    self.newFactory = ko.observable();
    self.addNewFactory = function()
    {
        if (self.newFactory())
            self.list.push(new mapFactory( { name: self.newFactory() } ));
    };
    
    self.toggleEdit = function(data)
    {
       data.isEdited( ! data.isEdited() );  
    };
    
    self.save = function(data)
    {
      // ajax.. etc..
        
        data.isEdited(false);
    };
    
    self.delete = function(data)
    {
     // ajax.. etc..
        
        self.list.remove(data);
    }
 };

var viewModel = new ViewModel;

// Call/Retrieve ajax data and push to observableArray
var retrieveDataFromAjax = [
    { 'name' : 'Mike' },
    { 'name' : 'Jack' }    
];

ko.utils.arrayForEach(retrieveDataFromAjax, function(data)
{
   viewModel.list.push(new mapFactory( data ));                         
});

ko.applyBindings(viewModel);