JSFiddle - React, Tailwind, and code Playground

HTML

<div id="thingy" class="field"><span>Text field one</span><input type='text' /></div><br />

<div id="thingy" class="field"><span>Text field two</span><input type='text' /></div><br />

<div id="thingy" class="field"><span>Text field three</span><input type='text' /></div><br />

CSS

.field {
    display: inline-block;
}

.field span {
    cursor:pointer;
}
.field input {
    display:none;
    border:none;
    padding:0;
    margin:0;
}

JavaScript

$(document).ready(function() {
    $(".field").delegate('span', 'click', function() {
        var $th = $(this).hide().css('size', "25");
       $th.siblings('input')
           .val($th.text()).show().focus();

    }).delegate("input", "blur", function() {
        $(this).hide()
            .siblings('span')
            .html(this.value).show();
    });
});