JSFiddle - React, Tailwind, and code Playground

HTML

<table id="mytable">
    <tbody>
        <tr>
            <td data-name="Name">Editable (click me) </td>
             <td> - No editable</td>
        </tr>    
    </tbody>    
</table>


<div id="result"></div>

JavaScript

$table = $("#mytable" );

$table.on("dblclick", "td[data-name]", function (e) {

        $td = $(this);

        // create textbox
        var oTxtbox = $('<input type="text" value="' + $td.text() + '"/>');
        // add textbox
        $td.html(oTxtbox);

        // remove event click
        $td.on("dblclick", function (e) {

            e.stopPropagation();

        });

        // save the new value           
        $td.on("keypress", ":text", function (e) { 

            if (e.which == 13) {

                // ajax code

            }

        });

        // remove the textbox if the user click outside the table and
        // re-attach the event on td
        $(document).on("click", function (e) {

            if ($table.has(e.target).length === 0) {

                $table.find("td[data-name]").each(function (i, elem) {

                    $td = $(elem);

                    if ($td.has(":text")) {

                        $td.text($td.find(":text").val());

                        // RE-ATTACH THE CLICK EVENT..NOT WORK
                        $td.on("click");

                    }

                });

            }

        });

 

    });