JSFiddle - React, Tailwind, and code Playground
HTML
<div class="inner">1</div>
<div class="inner2">1</div>
<div class="inner">1</div>
CSS
.inner {
background: red;
}
.inner2 {
background: grey;
}
JavaScript
$(function() {
$(".inner, .inner2").dblclick(function(e) {
e.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
updateVal(currentEle, value);
});
});
function updateVal(currentEle, value) {
var $thval = $('<input class="thVal" type="text" value="' + value + '" />')
$(currentEle).empty().append($thval);
$thval.focus().keyup(function(event) {
if (event.keyCode == 13) {
$(this).blur();
}
}).blur(function(){
$(currentEle).html($(".thVal").val().trim());
$thval.remove();
});
}