JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<div id="school_form-grades-list" style="display:block;">
    <table>
        <tr>
            <td class="bl_200px select_grade_set_1_error"><u>*</u> Grade Level(s) &amp;
                <br>Number of Students:
                <br>(<em>Please note: a minimum of 10 students is required to receive free admission</em>)</td>
            <td>
                <div style="padding-bottom:8px;display:block;" id="grade_level_set_1">
                    <select name="select_grade_set_1" id="select_grade_set_1" class="required">
                        <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>&nbsp;&nbsp;&nbsp;Num of Students:
                    <input type="text" class="textfield2 required" id="number_students_set_1" maxlength="4" name="number_students_set_1">
                </div>
                <div style="padding-bottom:8px;display:none;" id="grade_level_set_2">
                    <select name="select_grade_set_2" id="select_grade_set_2">
                        <option...

JavaScript

_add_more = 1;
_num_groups = 7;

/*
 * init method
 */
window.onload = function () {

    $(function () {
        $("#error-dialog").dialog({
            autoOpen: false,
            bgiframe: true,
            modal: true,
            position: top,
            closeOnEscape: true,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }
        });
    });

    $(function () {
        $("#processing-dialog").dialog({
            autoOpen: false,
            bgiframe: true,
            modal: true,
            position: top,
            closeOnEscape: true,
            draggable: false,
            width: 324
        });
    });

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

    function (e) {
        total_adults = 0;
        var grade_ten_1 = parseFloat($('input#number_students_set_1').val()) || 0;
        var grade_ten_2 = parseFloat($('input#number_students_set_2').val()) || 0;
        var grade_ten_3 = parseFloat($('input#number_students_set_3').val()) || 0;
        var grade_ten_4 = parseFloat($('input#number_students_set_4').val()) || 0;
        var grade_ten_5 = parseFloat($('input#number_students_set_5').val()) || 0;
        var grade_ten_6 = parseFloat($('input#number_students_set_6').val()) || 0;
        var grade_ten_7 = parseFloat($('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) * 0.1;
        $('input[name=number_adults]').val(Math.round(total_adults));

    });



}; ////////////////////// End of window.load()


function checkgrade() {
    var grades = $('#school_form-grades-list input').val();
    var grade_ten_1 = $('input#number_students_set_1').val();
    var grade_ten_2 = $('input#number_students_set_2').val();
    var grade_ten_3 =...