JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css">
<script src="http://junk.hostsaba.com/timetracker/jquery.jeditable.mini.js"></script>
<script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"></script>

<table border="1">
    <tr>
        <th>Product Name</th>
        <th>Brand</th>
        <th>Model</th>
        <th></th>
    </tr>
    <tr>
        <td>name 1</td>
        <td>brand 1</td>
        <td>model 1</td>
        <td class="edit"><button>edit</button></td>
    </tr>
    <tr>
        <td>name 2</td>
        <td>brand 2</td>
        <td>model 2</td>
        <td class="edit"><button>edit</button></td>
    </tr>
    <tr>
        <td>name 3</td>
        <td>brand 3</td>
        <td>model 3</td>
       
    </tr>
</table>

JavaScript

$('td:not(.edit)').editable('', {
    onblur: 'ignore',    
    event: 'edit'
});

$('td').click(function(e) {
    var allEditables = $(this).closest('table').find('td:not(.edit)').get();
    $.each(allEditables, function(i, elm) {
        elm.reset();
    });
    
    $(this).trigger('edit');
});