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');
        $('#textbox').val($('#textbox').val().slice(0, -1));
         //perform Purchase operation here
     }
     else if(keycode == 35 || keycode == 40 || keycode == 34 || keycode == 37 || keycode == 12 || keycode == 39 || keycode == 36 || keycode == 38 || keycode == 33 || keycode == 45){
            $('#Typoef').html('num lock is OFF');
            $('#textbox').val() = 0; 
            $('#textbox').val($('#textbox').val().slice(0, -1));
         }
     else {
         $('#Typoef').html('');
     }
    });