JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" style="border-collapse:collapse;">
                <tr>
                    <td>
                        ID
                    </td>
                    <td>
                        18
                    </td>
                    <td rowspan="4">
                        <a href="/app_dev.php/edit/ 18" class="edit-product">Edit</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Name
                    </td>
                    <td class="editable">
                        New product name!
                    </td>
                </tr>
                <tr>
                    <td>
                        Price
                    </td>
                    <td class="editable">
                        19.99
                    </td>
                </tr>
                <tr>
                    <td>
                        Description
                    </td>
                    <td class="editable">
                        Lorem ipsum dolor
                    </td>
                </tr>
          </table>




<table border="1" style="border-collapse:collapse;">
                <tr>
                    <td>
                        ID
                    </td>
                    <td>
                        18
                    </td>
                    <td rowspan="4">
                        <a href="/app_dev.php/edit/ 18" class="edit-product2">Edit</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Name
                    </td>
                    <td class="editable">
                        New product name!
                    </td>
                </tr>
                <tr>
                    <td>
                        Price
                    </td>
                    <td class="editable">
                        19.99
                    </td>
                </tr>
                <tr>
...

JavaScript

$('.edit-product').not('.editing').on('click', function(e){
        e.preventDefault();
        $(this).addClass("editing")
        var $table = $(this).closest('table');
        $table.find('.editable').each(function(i){
            var content = $(this).html().trim();
            $(this).wrapInner('<input type="text" name="" placeholder="'+content+'">');
        });
    });






    $('.edit-product2:not(.editing)').on('click', function(e){
        e.preventDefault();
        $(this).addClass("editing")
        var $table = $(this).closest('table');
        $table.find('.editable').addClass('xxxx');
        $table.find('.editable').each(function(i){
            var content = $(this).html().trim();
            $(this).wrapInner('<input type="text" name="" placeholder="'+content+'">');
        });
    });