JSFiddle - React, Tailwind, and code Playground

HTML

<section class="login_form_row1" style="margin-top: 15px;">
                                                                <label class="lable_heading5">
                                                                    Hire Date:</label>
                                                                <section class="txtfild_outer17">
                                                                    <section class="txtfild_inner9">
                                                                        <asp:TextBox ID="txtHireDate" runat="server" TabIndex="17" CssClass="DatepickerInput" />
                                                                    </section>
                                                                </section>
                                                                <section class="date_pickerouter">
                                                                    <asp:ImageButton ID="ImgHireDate" ImageUrl="../Images/date_icon.jpg" OnClientClick="return PickDate();"
                                                                        runat="server"  />
                                                                </section>
                                                                <section class="clear">
                                                                </section>
                                                            </section>


 <section class="login_form_row1" style="margin-top: 15px;">
                                                                <label class="lable_heading5">
                                                                    Birth Date:</label>
                                                                <span class="login_form_row1" style="margin-top: 15px;">
                                                                    <section class="txtfild_outer17">
                                                                        <section...

JavaScript

$(document).ready(function () {
  //#region Hire Date
    $("[id$='_txtHireDate']").change(function () {
        

        //Set Next element for tabbing
        var element = document.getElementById($("[id$='_ImgHireDate']").attr("id"));
        element.tabIndex = "18";
        element.focus();

    });


    $("[id$='_txtHireDate']").keypress(function (e) {

        var code = e.keyCode;

        if (code == "9" && $("[id$='_txtHireDate']").val() != '') {

            //Set Next element for tabbing
            var element = document.getElementById($("[id$='_txtBirthDate']").attr("id"));
            element.tabIndex = "18";
            element.focus();
        }

    });
    //#endregion

    //#region Birth Date //
    $("[id$='_txtBirthDate']").change(function () {

        


        //Set Next element for tabbing
        var element = document.getElementById($("[id$='_ImgBirthDate']").attr("id"));
        element.tabIndex = "19";
        element.focus();
    });

    $("[id$='_txtBirthDate']").keypress(function (e) {

        var code = e.keyCode;

        if (code == "9" && $("[id$='_txtBirthDate']").val() != '') {

            //Set Next element for tabbing
            var element = document.getElementById($("[id$='_txtEvaluationDate']").attr("id"));
            element.tabIndex = "19";
            element.focus();
        }

    });
    //    //#endregion


    //#region Evaluation Date
    $("[id$='_txtEvaluationDate']").change(function () {

       

        //Set Next element for tabbing
        var element = document.getElementById($("[id$='_ImgEvaluationDate']").attr("id"));
        element.tabIndex = "19";
        
        element.focus();
    });

    $("[id$='_txtEvaluationDate']").keypress(function (e) {

        var code = e.keyCode;

        if (code == "9" && $("[id$='_txtEvaluationDate']").val() != '') {

            //Set Next element for tabbing
            var element =...