JSFiddle - React, Tailwind, and code Playground

HTML

<span id="test1" class="test">Test1</span>
<span id="test2" class="test">Test2</span>
<span id="test3">Test3</span>
<span id="test3" class="test">Test4</span>
<span id="test3" class="test">Test5</span>

JavaScript

var cellElem = {
        old_elem: "",
        next_elem: "",
        canTab: false,
        old_val: ""
    };
    
    var cellInfo = {
        cID: ""
    };

$('body').on('click',".test", function(){
        cellElem.old_elem = $(this);

        cellInfo.cID = $(this).attr("id");
        cellElem.old_val = $(this).text();
            
        $(this).replaceWith($('<input style="width:40px" id="edit_' + 
                              cellInfo.cID  + '" name="edit_' + 
                              cellInfo.cID + '" value="' + 
                              cellElem.old_val+ '"/>'));
    
        window.setTimeout(function(){ 
            $("#edit_" + $(this).attr("id")).focus();
            $("#edit_" + cellInfo.cID).select(); }, 50); //hack for IE
});

$('body').on('blur keydown','input[name^="edit_"]',function(e){
     var keyCode = e.keyCode || e.which; 
     e.preventDefault;
    if (keyCode == 9) {
        cellElem.canTab = true;
        cellElem.next_elem = $(this).nextAll("span.test").first();
        canTraverse();
     } else if (e.type == 'focusout' || keyCode == 13) {
         cellElem.next_elem = "";
         canTraverse();
     }
});


function canTraverse(){
    $("#edit_"+cellInfo.cID).replaceWith(cellElem.old_elem);
    if (cellElem.canTab && cellElem.next_elem.length != 0){
        cellInfo.cID = cellElem.next_elem.attr("id");
        cellElem.old_val = cellElem.next_elem.text();
        
        cellElem.next_elem.replaceWith($('<input style="width:40px" id="edit_' + 
                          cellInfo.cID  + '" name="edit_' + 
                          cellInfo.cID + '" value="' + 
                          cellElem.old_val+ '"/>'));
        
        window.setTimeout(function(){ 
            $("#edit_" + $(this).attr("id")).focus();
            $("#edit_" + cellInfo.cID).select(); }, 50); //hack for IE
        cellElem.old_elem = cellElem.next_elem; 
    }
}