JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<form id="form-school_form-registration" name="form-school_form-registration" method="post">
    <input type="hidden" name="formType" value="schoolvisit" />
    <div class="formblock">
        <!-- 3 choices for times to vist Start -->
        <div id="date_choice" style="display:block;">
             <h2>Please Select 3 dates to visit&nbsp;</h2>

            <table>
                <tr>
                    <td class="visit1_date_error select_visit1_hour_error select_visit1_minute_error"> <u>*</u> School Visit Date &amp; Time
                        <br/>(1st choice):</td>
                    <td>
                        <div class="customInput">
                            <input type="text" class="date-pick textfield2 required" id="visit1_date" name="visit1_date" maxlength="16" value="" />
                        </div>
                        <select name="select_visit1_hour" id="select_visit1_hour" class="hour-pick required sel-1" style="width:116px;">
                            <option value="">&lt; Hour &gt;</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                        <select name="select_visit1_minute" id="select_visit1_minute" class="minute-pick required sel-1" style="width:116px;">
                            <option value="">&lt; Min &gt;</option>
                            <option value="00">00</option>
                            <option value="15">15</option>
                            <option value="30">30</option>
                            <option value="45">45</option>
              ...

JavaScript

window.onload = function () {
    $('#school_form-grades-list input').change(

    function (e) {
        total_adults = 0;
        var grade_ten_1 = parseFloat($('#select_grade_limit_k_5 input#number_students_set_1').val()) || 0;
        var grade_ten_2 = parseFloat($('#select_grade_limit_k_5 input#number_students_set_2').val()) || 0;
        var grade_ten_3 = parseFloat($('#select_grade_limit_k_5 input#number_students_set_3').val()) || 0;
        var grade_ten_4 = parseFloat($('#select_grade_limit_k_5 input#number_students_set_4').val()) || 0;
        var grade_ten_5 = parseFloat($('#select_grade_limit_k_5 input#number_students_set_5').val()) || 0;
        var grade_ten_6 = parseFloat($('#select_grade_limit_k_5 input#number_students_set_6').val()) || 0;
        var grade_ten_7 = parseFloat($('#select_grade_limit_k_5 input#number_students_set_7').val()) || 0;
        var grade_ten_8 = parseFloat($('#select_grade_limit_6_12 input#number_students_set_1').val()) || 0;
        var grade_ten_9 = parseFloat($('#select_grade_limit_6_12 input#number_students_set_2').val()) || 0;
        var grade_ten_10 = parseFloat($('#select_grade_limit_6_12 input#number_students_set_3').val()) || 0;
        var grade_ten_11 = parseFloat($('#select_grade_limit_6_12 input#number_students_set_4').val()) || 0;
        var grade_ten_12 = parseFloat($('#select_grade_limit_6_12 input#number_students_set_5').val()) || 0;
        var grade_ten_13 = parseFloat($('#select_grade_limit_6_12 input#number_students_set_6').val()) || 0;
        var grade_ten_14 = parseFloat($('#select_grade_limit_6_12 input#number_students_set_7').val()) || 0;
        //var grade_adult = parseFloat($('input#number_adults').val());
        total_adults = (grade_ten_1 + grade_ten_2 + grade_ten_3 + grade_ten_4 + grade_ten_5 + grade_ten_6 + grade_ten_7 + grade_ten_8 + grade_ten_9 + grade_ten_10 + grade_ten_11 + grade_ten_12 + grade_ten_13 + grade_ten_14) * 0.1;
       ...