JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>change me</td>
        <td>change</td>
    </tr>
    <tr>
        <td>change me3</td>
        <td>change me4</td>
    </tr>
</table>

CSS

table, td, tr {
    border: 1px solid black;
}

JavaScript

$("table").on("dblclick", "td", function(e) {
    if (e.target.nodeName != "TD") return;
    var val = $(this).html();
    $(this).empty().append($("<form/>").append(
        $("<input/>", {type:"text"}).attr("value", val),
        $("<button/>", {type:"reset"}).text("Reset"),
        $("<button/>", {type:"button", class:"cancel"}).text("Cancel"),
        $("<button/>", {type:"submit"}).text("Submit")
    ));
}).on("submit", "form", function(e) {
    var val = $(this).find("input:text").val();
    // do something, e.g. send val via ajax
    $(this).parent().html(val);
    e.preventDefault();
}).on("click", "button.cancel", function(e) {
    var $form = $(this).parent(),
        $input = $form.find("input:text"),
        oldval = $input.attr("value");
    //                  ^^^^^^^^^^^^^
    // or .prop("defaultValue"), but not .val()!
    if (oldval == $input.val() || confirm("Do you really want to discard your changes?"))
        $(this).parent().html(oldval);
    e.preventDefault();
});