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>
        <tbody>
            <tr>
                <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 input_error">
                        <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 input_error" 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 value="">&lt; Grade &gt;</option>
                        <option value="Pre-K">Pre-K</option>
                        <option value="K">K</option>
                        <option value="1st">1st</option>
        ...

CSS

.form_error_div {
    font-size: 11px!important;
    color: red;
}

JavaScript

_add_more = 1;
_num_groups = 7;

function checkgrade() {
    var grades = $('#school_form-grades-list input');
    var grade_ten_1 = $('input#number_students_set_1').val();
    var grade_ten_2 = $('input#number_students_set_2').val();
    var grade_ten_3 = $('input#number_students_set_3').val();
    var grade_ten_4 = $('input#number_students_set_4').val();
    var grade_ten_5 = $('input#number_students_set_5').val();
    var grade_ten_6 = $('input#number_students_set_6').val();
    var grade_ten_7 = $('input#number_students_set_7').val();
    if (checkgrade_list()) {
        //_is_checked = true;

        $('#school_form-grades-list').fadeOut('fast');
        $('#school_form-grades-list').fadeIn('fast');

    } else if ($('input#number_students_set_1').val() <= 9 || $('input#number_students_set_1').val() === '') {

        $('input#number_students_set_1').addClass('error');

    } else if ($('input#number_students_set_2').val() <= 9 || $('input#number_students_set_2').val() === '') {

        $('input#number_students_set_2').addClass('error');

    } else if ($('input#number_students_set_3').val() <= 9 || $('input#number_students_set_3').val() === '') {

        $('input#number_students_set_3').addClass('error');

    } else if ($('input#number_students_set_4').val() <= 9 || $('input#number_students_set_4').val() === '') {

        $('input#number_students_set_4').addClass('error');

    } else if ($('input#number_students_set_5').val() <= 9 || $('input#number_students_set_5').val() === '') {

        $('input#number_students_set_5').addClass('error');

    } else if ($('input#number_students_set_6').val() <= 9 || $('input#number_students_set_6').val() === '') {

        $('input#number_students_set_6').addClass('error');

    } else if ($('input#number_students_set_7').val() <= 9 || $('input#number_students_set_7').val() === '') {

        $('input#number_students_set_7').addClass('error');

    }

}

function addMore() {
    if (($("#number_students_set_" +...