JSFiddle - React, Tailwind, and code Playground

HTML

<div class="booking-right left">
 
    <div class="col-2 left">
        <p class="p-lbl-txt left">DATE:</p>
        <input type="text" id="txt-date" class="input-txt-sml move right" tabindex="7" />
    </div>
    <div class="col-1 left">
        <p class="p-lbl-txt left">LEAD TIME:</p>
        <input type="text" id="txt-lead" class="input-txt-sml move right" tabindex="6" />
    </div>
    <div class="col-2 left">
        <p class="p-lbl-txt left">TIME:</p>
        <input type="text" id="txt-min" class="input-txt-xxsml move right" tabindex="9" />
        <input type="text" id="txt-hour" class="input-txt-xxsml move right" tabindex="8" />
    </div>
</div>

JavaScript

$('#txt-date').keyup(function (e) {
    if ((e.keyCode === 38 && $("#txt-date").is(":focus")) || (e.keyCode === 40 && $("#txt-date").is(":focus"))) {
        if (e.keyCode === 38) $("#txt-telephone").focus();
        else if (e.keyCode === 40) $("#txt-lead").focus();
        $('#txt-date').datepicker("hide");
    }
});
$(function () {
    $("#txt-date").datepicker();
});