JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="field">hello there:)</div>
</div>

JavaScript

$(function() {
    $('#container').on('click', '#field', function() {
        $(this).replaceWith("<input type=\"text\" name=\"fname\" id=\"field\" value=\"" + $(this).text() + "\">");
    });

    $('#container').on('mouseout', '#field', function() {
        $(this).replaceWith("<div id=\"field\">" + $(this).val() + "</div>");
    });

});