JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<table>
    <tr>
        <td class="cambiarClientes">1232</td>
        <td>worked</td>
        <td>pending</td>
        <td>col4</td>
        <td>col5</td>
    </tr>
</table>

JavaScript

$(".cambiarClientes").click(function () {
    row = $(this).closest("tr")
    $(this).html('<form action="cambioWebPortal.php" method="GET"><input type="text" id="infoClientes" name="infoClientes" value="' + $(this).html() + '"><input type="hidden" name="eventoPertenece" value="' + $(this).attr("eventoPertenece") + '"><input type="hidden" name="infoFeeder" value="' + row.find("td:eq(3)").html() + '"><input type="hidden" name="infoTipo" value="' + row.find("td:eq(4)").html() + '"><input  type="submit" value="Cambiar"></form>');

    row.find("td:eq(3)").html('<input type="text" class="infoFeeder" value="' + row.find("td:eq(3)").html() + '">');

    row.find("td:eq(4)").html('<input type="text" class="infoTipo" value="' + row.find("td:eq(4)").html() + '">');

    $(this).unbind("click");
});

$(document).on("keyup", ".infoTipo", function () {
    $(this).closest("tr").find("td:eq(0) input[name=infoTipo]").val($(this).val())
})
$(document).on("keyup", ".infoFeeder", function () {
    $(this).closest("tr").find("td:eq(0) input[name=infoFeeder]").val($(this).val())
})