JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<table class="tab-table">
 <thead>
 <tr>
 <th><b>Article</b></th>
 <th><b>Content</b></th>
 <th>&nbsp;</th>
 <th>&nbsp;</th>
 </tr>
 </thead>
 <tbody data-bind="template :{name:currentTemplate,foreach:articles}">
 </tbody>
 </table>
 <script id="readOnly" type="text/html">
<tr>
<td><span data-bind="text:title"></span></td>
<td><span data-bind="text:content"></span></td>
<td><input type="button" value="Edit" data-bind="click: function() { viewModel.selectedMode($data) }"/></td>
<td><input type="button" value="Delete"/></td>
</tr>
</script>
<script id="editMode" type="text/html">
   <tr>
       <td><input type="text" data-bind="value:title"></input></td>
       <td><input type="text" data-bind="value:content"></input></td>
       <td><input type="button" value="Cancel" data-bind="click: function() {viewModel.reset();}"></input></td>
       <td><input type="button" value="Save"></input></td>
   </tr>
</script>

JavaScript

var viewModel = {
    
    articles: [{
        id: 1,
        title: "KnockOut Templating",
        content: "Content for Knockout goes here."
    }, {
        id: 2,
        title: "SharePoint 2013 REST API",
        content: "Content for SharePoint."
    }, {
        id: 3,
        title: "Knockout with SharePoint",
        content: "Content for knockout and SharePoint."
    }],
     
    selectedTemplate: ko.observable("readOnly"),
    selectedMode: ko.observable(),    
};
 
viewModel.currentTemplate = function (tbl) {
    return tbl === this.selectedMode() ? 'editMode' : this.selectedTemplate();
}.bind(viewModel);
 
viewModel.reset = function (t) {
    this.selectedMode("editMode");
};
ko.applyBindings(viewModel);