JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<title>a</title>
<head>

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

JavaScript

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

});