JSFiddle - React, Tailwind, and code Playground

HTML

<table>
   <thead>
     <th class="edit_td">name1</th>
     <th class="edit_td">name2</th>
     <th class="edit_td">name3</th>
   </thead>
    <tr>
        <td>Test 123</td>
        <td>Test 123</td>
        <td>Test 123</td>
    </tr>
    <tr>
        <td>Test 456</td>
        <td>Test 123</td>
        <td>Test 123</td>
    </tr>
    <tr>
        <td class="edit_td">Test 789</td>
        <td class="edit_td">Test 123</td>
        <td class="edit_td">Test 123</td>
    </tr>
</table>

CSS

table {
    border: 1px solid black;
}

JavaScript

$('.edit_td').on('click', function (e) {
    e.stopPropagation();
    if (! $(this).hasClass('active')) {
        $(this).addClass('active');
        var val = $(this).html();
        $(this).html($('<input type="text" value="' + val + '"/>'));
    }
});

function removeActive() {
    $('.edit_td').each(function() {
        if ($(this).hasClass('active')) {
            var val = $(this).find('input').val();
            $(this).empty();
            $(this).html(val);
            $(this).removeClass('active');
        }
    });
}

$(document).on('click', function(){
       removeActive();
});