JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<button data-bind="click: AddNewData">Add New Data</button>
<button data-bind="click: UpdateDataByIds">Update Data</button>
<br><br>
	  <table class="imagetable">
      <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Price</th> 
        <th>Status</th> 
        <th>Edit</th> 
        <th>Delete</th> 
      </tr>
      </thead>
      <tbody data-bind="foreach: Stocks">
        <tr data-bind="css: { mutated: $root.Mutated.indexOf(id()) > -1 }">
            <td data-bind="text: id"></td>
            <td data-bind="text: name"></td> 
            <td data-bind="text: price"></td> 
            <td data-bind="text: status"></td>
            <td><a href="#" data-bind="click: $parent.UpdateData">edit</a></td>
            <td><a href="#" data-bind="click: $parent.DeleteItem">delete</a></td>
        </tr>
      </tbody>
    </table>

CSS

table.imagetable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
}
table.imagetable th {
	background:#b5cfd2 url('cell-blue.jpg');
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #999999;
}
table.imagetable td {
	background:#dcddc0 url('cell-grey.jpg');
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #999999;
}

table.imagetable tr.mutated td { background-color: red; }

JavaScript

var StockItem = function(_id, _name, _price, _status){
    var self = this;
    self.id = ko.observable(_id);
    self.name = ko.observable(_name);
    self.price = ko.observable(_price);
    self.status = ko.observable(_status);
    self._mutated = ko.observable(false);
};

var data= [ 
new StockItem("12345", "Acme Widget 1", "£25.99", "In Stock"), 
new StockItem("67890", "Acme Widget 2", "£28.99", "In Stock"),                                                               new StockItem("11123","Acme Widget 3","£15.99", "In Stock"), 
 new StockItem("14156", "Acme Widget 4", "£33.99", "In Stock")
];

var NewData = [new StockItem("99999", "HSL Limited", "£78.99", "In Stock")];

var appViewModel = function() 
{
    var self = this;
   	self.Stocks = ko.observableArray(data);
    
    self.AddNewData = function(){
        self.Stocks.push.apply(self.Stocks,NewData);
        self.Mutated.push(NewData[0].id());
    };
    
    self.DeleteItem = function(dataContext){
        var itemToDelete = dataContext;
        self.Stocks.remove(itemToDelete);
    }

    self.Mutated = ko.observableArray();
    
    self.UpdateDataByIds = function(){
        var id1 = '11123';
        var id2 = '12345';
        self.UpdateById(id1,null,null,"Out of Stock");
        self.UpdateById(id2,null,"31.45",null);
    };
    
    self.UpdateById = function(_id, _name, _price, _status){
        var matchedItem = ko.utils.arrayFirst(self.Stocks(),          function(item) {
            return item.id() === _id;
        });
        
        if (matchedItem != null){
            if (_name != null) matchedItem.name(_name);
            if (_price != null) matchedItem.price(_price);
            if (_status != null) matchedItem.status(_status);
            self.Mutated.push(_id);
        }
    };
    
    self.UpdateData = function(dataContext){
        var itemToEdit = dataContext;
        itemToEdit.status("Out of Stock");
        self.Mutated.push(itemToEdit.id());
    };
};

var vm = new...