JSFiddle - React, Tailwind, and code Playground

HTML

<table width='700px' id="employeetable" class="tablesorter" style='table-layout:fixed;' border="1">
<thead>
    <tr>
        <th>Select to Edit</th>
        <th>Group Id</th>
        <th>User Id</th>
        <th>Object</th>
        <th>Read</th>
        <th>Update</th>
        <th>Insert</th>
        <th>Delete</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td align="center"><input id='{$smarty.foreach.foo.iteration}' type="radio" name="SelcetedObject" value= "{$privilegesItem['Object']}"/> </td>
        <td align="center">1</td>
        <td align="center">2</td>
        <td align="center">object</td>
        <td id='read_{$smarty.foreach.foo.iteration}'   align="center">read  </td>
        <td id='update_{$smarty.foreach.foo.iteration}' align="center">update</td>
        <td id='insert_{$smarty.foreach.foo.iteration}' align="center">insert</td>
        <td id='delete_{$smarty.foreach.foo.iteration}' align="center">delete</td>
    </tr>
</tbody>
</table>

JavaScript

$(document).ready(function() {
    $(".tablesorter td").not(':first').on('click',null,function() {
       var data = $(this).html();
        if(!($(this).children('input').length > 0)) {
            $(this).html("<input type='text' id='focus' value='"+data+"' />").children().focus();
        }
    });
    
    $(".tablesorter td").on('blur','#focus',function() {
       $(this).parent().html($(this).val());
    });
});