JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<table id="container">
    <tr><th>Column 1</th><th>Column 2</th></tr>
    <tr>
        <td><input type="text" value="Test 1" /></td>
        <td><input type="text" value="Test 2" /></td>
        <td><button>Edit</button></td>
    </tr>
    <tr>
        <td><input type="text" value="Test 1" /></td>
        <td><input type="text" value="Test 2" /></td>
        <td><button>Edit</button></td>
    </tr>
    <tr>
        <td><input type="text" value="Test 1" /></td>
        <td><input type="text" value="Test 2" /></td>
        <td><button>Edit</button></td>
    </tr>
</table>

JavaScript

function setupRows(context) {
  $("span.view", context).remove();
  $('input', context).each(function() {
    $("<span />", { text: this.value, "class":"view" }).insertAfter(this);
    $(this).hide();
  });
}
setupRows('#container');

$("button").toggle(function() {
    $(this).closest("tr").find("input, span.view").toggle();
}, function() {
    setupRows($(this).closest("tr"));
});