JSFiddle - React, Tailwind, and code Playground

by Pezmc

HTML

<span id="thingy" class="field">Text field one</span><br />

<span id="thingy" class="field">Text field two</span><br />

<span id="thingy" class="field">Text field three</span><br />

JavaScript

$(document).ready(function() {
    function editfield() { //Handles swapping to textbox
        var element = $(this);
        alert(element.text());
        element.css('cursor', 'auto');
        element.css('display', 'inline-block');
        element.html('<input type="text" size="25" value="' + element.text() + '" style="width:' + element.width() + 'px;height:' + element.height() + 'px;border:none;padding:0px;margin:0px;">');
        element.children('input').focus();
        $(element).delegate("input", "focus", function() {
            $(element).delegate("input", "blur", function() {
                element.html(element.children('input:text').val());
                element.css('cursor', 'pointer');
                element.one("click", editfield);
            });
        });

    }

    ////////////////////////////////
    $(".field").css('cursor', 'pointer');
    $(".field").one("click", editfield);
});