JSFiddle - React, Tailwind, and code Playground

HTML

<div>Problem how to set Arrow LEFT and Arrow RIGHT from Keyboard</div>
<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">&#8592;</div>
            <div class="keybutton" style="width:220px" onclick="jQuery('#'+current_focus).val(jQuery('#'+current_focus).val()+' ')">space</div>
            <div class="keybutton">&#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 () {
	     $('#NAME').focus();
   });

   });