JSFiddle - React, Tailwind, and code Playground

HTML

<div><input id="NAME" value="Click me" onfocus='setCurrentFocus(this);' ></div>
    <div id="keyboard">
        <div style="height:60px; width:350px; background:#f4f4f4; padding-top:5px;">
            <div class="keybutton" onclick="jQuery('#'+current_focus).val(jQuery('#'+current_focus).val()+'1')">1</div>
            <div class="keybutton" onclick="jQuery('#'+current_focus).val(jQuery('#'+current_focus).val()+'2')">2</div>
            <div class="keybutton" onclick="jQuery('#'+current_focus).val(jQuery('#'+current_focus).val()+'3')">3</div>
            <div class="keybutton" onclick="jQuery('#'+current_focus).val(jQuery('#'+current_focus).val()+'4')">4</div>
            <div class="keybutton" onclick="jQuery('#'+current_focus).val(jQuery('#'+current_focus).val()+'5')">5</div>
            <div class="keybutton" onclick="jQuery('#'+current_focus).val(jQuery('#'+current_focus).val().slice(0,-1));">back</div>
        </div>
         <div style="height:55px; width:350px; background:#f4f4f4;">
            <div class="keybutton" id="back">&#8592;</div>
            <div class="keybutton" style="width:220px" onclick="jQuery('#'+current_focus).val(jQuery('#'+current_focus).val()+' ')">space</div>
            <div class="keybutton" id="fwd">&#8594;</div>
        </div>       
    </div>

CSS

#keyboard{
display:none;
}
.keybutton{
   height:50px;
   line-height:50px;
   width:50px;
   margin-left:5px;
   margin-bottom:5px;
   text-align:center;
   vertical-align:middle;
   border:1px solid black;
    position:relative;
    float:left;
 font-family:VERDANA;
 font-size:12pt;
 font-weight:bold;
}
.keybutton:hover{
 background:blue;
    color:white;
}

JavaScript

function setCurrentFocus(obj) {
 current_focus = obj.id;
};  
$(document).ready(function () {
   $('#NAME').click(function () {
   $('#keyboard').slideDown();
   });
       
   });

   $(document).ready(function () {
   $('.keybutton').click(function () {
	     $('#'+current_focus).focus();
   });

   });
$(document).ready(function() {
    $('#back').click(function() {
        moveCursor(-1, current_focus);
    })
    $('#fwd').click(function() {
        moveCursor(1, current_focus);
    })
})

function moveCursor(step, object_id) {
    inp = document.getElementById(object_id);
    if (inp.createTextRange) {
        console.log(11);
        var part = inp.createTextRange();
        part.move("character", 2);
        part.select();
    } else if (inp.setSelectionRange) {
                
        var position = document.getElementById(object_id).selectionStart;
        inp.setSelectionRange(position+step, position+step);
    }
    inp.focus();
}