JSFiddle - React, Tailwind, and code Playground

by Nofiden Noble

HTML

<div class="col-md-12" style="margin-top: 15px;">
    <div class="col-md-2">
        <div class="form-group">
            <label>Date & Time</label>
            <input name="date_and_time" class="form-control"   value="<?=date('Y-m-d H:i:s')?>" type="text">
        </div>
    </div>

    <div class="col-md-2">
        <div class="form-group">
            <label>Invoice Number</label>
            <input name="invoice_number" class="form-control"   value="39" type="text">
        </div>
    </div>

    <div class="col-md-2">
        <div class="form-group">
            <label>Search Customer by Mobile / Name</label>
            <input name="customer_search_mobile_name" class="form-control"  value="" type="text">
        </div>
    </div>

</div>

JavaScript

var isShift = false;
$("input").keydown(function(e){
		if(e.keyCode==16)
		isShift = true;
    if ((e.keyCode==40 || e.keyCode==39) && !isShift) {
      $(this).parent().parent().next().find('input').focus()
    }
	  else  if ((e.keyCode==37 || e.keyCode==38) && !isShift) {
      $(this).parent().parent().prev().find('input').focus()
    }
});

$("input").keyup(function(e){
	if(e.keyCode==16)
		isShift = false;
});