JSFiddle - React, Tailwind, and code Playground

HTML

<div id='mydiv_id'>
   *before* <span id='myspan_id' tabindex='0'>in span</span> !after!
</div>

JavaScript

var $mydiv = null;
var $myspan = null;
$(document).ready(function() {
  $myspan = $('#myspan_id');
  $mydiv = $('#mydiv_id');
    $myspan.on('focus', function() { var myinput = 
           $("<input type='text' id='myinput_id' width='16' class='myinp_cl'/>");
        $myspan.replaceWith(myinput);
        myinput.focus();
    });
});