JSFiddle - React, Tailwind, and code Playground

HTML

<label>Click and press any key : </label><input id="textbox" type="text" size="30" />
     
    <div>
        <label>Detected keycode : </label><span id="keydownCode">0</span>.
    </div>
<div>
        <label>Type of Transaction : </label><span id="Typoef">0</span>.
    </div>

CSS

body {
    background:#abcdef;
}
label {
    margin:10px;
    font-size:20px;
}
input {
    height:20px;
}
div {
    margin-top:15px;
}

JavaScript

$('#textbox').keydown(function(event){
        var keycode = (event.keyCode ? event.keyCode : event.which);
        $('#keydownCode').html(keycode);
     
     
     
     if(keycode == 144){
        $('#Typoef').html('It is a Sell');
         //perform Sell operation here
     }
     else if(keycode == 109){
        $('#Typoef').html('It is a Purchase');
         //perform Purchase operation here
     }
     else if(keycode == 35){
        $('#textbox').val($('#textbox').val()+"1");
         e.preventDefault();
     }
     else if(keycode == 40){
        $('#textbox').val($('#textbox').val()+"2");
         e.preventDefault();
     }
     else if(keycode == 34){
        $('#textbox').val($('#textbox').val()+"3");
         e.preventDefault();     
     }
     else if(keycode == 37){
         $('#textbox').val($('#textbox').val()+"4");
         e.preventDefault(); 
     }
     else if(keycode == 12){
        $('#textbox').val($('#textbox').val()+"5");
         e.preventDefault();     
     }
     else if(keycode == 39){
        $('#textbox').val($('#textbox').val()+"6");
         e.preventDefault();     
     }
     else if(keycode == 36){
        $('#textbox').val($('#textbox').val()+"7");
         e.preventDefault();     
     }
     else if(keycode == 38){
        $('#textbox').val($('#textbox').val()+"8");
         e.preventDefault();     
     }else if(keycode == 33){
        $('#textbox').val($('#textbox').val()+"9");
         e.preventDefault();     
     }
     else if(keycode == 45){
        $('#textbox').val($('#textbox').val()+"0");
         e.preventDefault();     
     }
     else{
         $('#Typoef').html('');
     }
    });