JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<table>
    <tbody data-bind="foreach: persons">
        <tr><td data-bind="text: name"></td><td data-bind="text: age"></td>
            <td><button data-bind="click: function(event) { editPerson(event); }">Edit</button><div style="display: none" title="Edit"><input data-bind="value: name" /></div></td></tr>
    </tbody>
</table>

CSS

table {
    
}

table td {
  padding: 5px;
  border: 1px solid red;  
}

JavaScript

(function(){
    var viewModel = {
        persons: ko.observableArray([
        { name: ko.observable('Paul'), age: 31 },
        { name: ko.observable('Greg'), age: 29 }])        
    };
    
    window.editPerson = function(event) {
        var src = event.target || event.srcElement;
        
        $('div', $(src).parent()).dialog();
    };
    
    ko.applyBindings(viewModel);
})();