JSFiddle - React, Tailwind, and code Playground
HTML
<span class="edit-on-click">Click to edit</span>
JavaScript
$(document).ready(function() {
$('.edit-on-click').click(function() {
var $text = $(this),
$input = $('<input type="text" />')
$text.hide()
.after($input);
$input.val($text.html()).show().focus()
.keypress(function(e) {
var key = e.which
if (key == 13) // enter key
{
$input.hide();
$text.html($input.val())
.show();
return false;
}
})
.focusout(function() {
$input.hide();
$text.show();
})
});
});