JSFiddle - React, Tailwind, and code Playground

HTML

<div id='mydiv_id'> <span id='myspan_id' tabindex='0'>in span</span>

</div>

CSS

#mydiv_id {
    background-color: lightpink;
}
#myspan_id {
    background-color: lightyellow;
    border: 3px navy;
}

JavaScript

var $mydiv = null;
var $myspan = null;
$(document).ready(function () {
    $myspan = $('#myspan_id');
    $mydiv = $('#mydiv_id');
    console.log(" mydiv=", $mydiv, " myspan=", $myspan);
    $myspan.keypress(function (ev) {
        console.log("myspan keypress ev=", ev);
        if (ev.keyCode === 32 || ev.key === ' ') {
            console.log("myspan got space ev=", ev);
            var myinput = $("<input type='text' id='myinput_id' width='16' class='myinp_cl'/>");
            $myspan.replaceWith(myinput);
            myinput.focus();
            console.log("myspan replaced with myinput=", myinput);
        }
    });
    console.log(" mydiv=", $mydiv, " myspan=", $myspan);
});