JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>

    <td><span>text</span>
      <input type='text' name='text' value='text' class='toedit' readonly='readonly' />
    </td>

  </tr>

</table>

CSS

td {
  border: 1px solid #eee;
  position: relative;
  min-width: 120px;
}

td input,
td select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.toedit {
  opacity: 0;
}

JavaScript

$("table").on("focus", "input, select", function() {
  $(this)
    .prop("readonly", false)
    .removeClass("toedit");
});

$("table").on("blur", "input, select", function() {
  $(this)
    .prop("readonly", true)
    .addClass("toedit")
    .siblings("span").text($(this).val());
    console.log($(this).val());
});

$("table").dblclick(function() {
  $(this).children().focus();
  console.log("onclick");
});