JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div id="school_form-grades-list" style="">
     <h2>How many students are you bringing from each grade?</h2>

    <div id="minimum_students" style="margin-bottom:10px; display:none;"><em>We require a minimum of 10 students to qualify for a school visit. Please contact the Page School Programs Team at 323.857.6300 x 111 or email [email protected] for more information. </em>

    </div>
    <div class="bl_200px select_grade_set_1_error"> <u>*</u>Grades Pre-K – 12th</div>
    <div id="grades">
        <fieldset style="padding-bottom:8px;display:block;" id="grade_level_set_1">
            <label>Number of Students:</label>
            <div class="customInput">
                <input type="text" class="textfield2" id="number_students_set_1" maxlength="4" name="number_students_set_1">
            </div>
            <select name="select_grade_set_1" id="select_grade_set_1" class="sel-1" style="width: 116px; position: absolute; opacity: 0; font-size: 13px; height: 26px;">
                <option value="">&lt; Grade &gt;</option>
                <option value="Pre-K">Pre-K</option>
                <option value="K">K</option>
                <option value="1st">1st</option>
                <option value="2nd">2nd</option>
                <option value="3rd">3rd</option>
                <option value="4th">4th</option>
                <option value="5th">5th</option>
                <option value="6th">6th</option>
                <option value="7th">7th</option>
                <option value="8th">8th</option>
                <option value="9th">9th</option>
                <option value="10th">10th</option>
                <option value="11th">11th</option>
                <option value="12th">12th</option>
            </select><span class="customSelect1" style="display: inline-block;"><span class="customSelectValue1" style="width: 112px; display: inline-block;">&lt; Grade &gt;</span></span>
        </fieldset>
        <fieldset...

JavaScript

$('#school_form-grades-list input').change(

function (e) {
    var total_adults = 0;
    var total_x = 0;
    for (i = 1; i < 8; i++) {
        x = parseFloat($('input#number_students_set_' + i).val()) || 0;
        if (!isNaN(x)) total_x += x;
    }
    total_adults = (total_x) * 0.1;
    input_adults = $('input[name=number_adults]').val();
    if (input_adults.length == '') {
        $('input[name=number_adults]').val(Math.round(total_adults));
    } else if (input_adults.length >= '1') {
        if (input_adults >= total_adults) {
        } else if (input_adults < total_adults) {
            $('input[name=number_adults]').val(Math.round(total_adults));
        }
    }
});