JSFiddle - React, Tailwind, and code Playground
HTML
<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="">< Grade ></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>
Num of Students:
<input type="text" class="textfield2 required" id="number_students_set_1" maxlength="4" name="number_students_set_1"/>
</div>
<div id="remove_set_3" style="display: inline;"> ( <a name="#" style="cursor:pointer; color:#788D19; font-size:10px; font-weight:bold;">remove</a> )</div>
CSS
.error {
color: red;
font-weight: bold;
}
JavaScript
_err = "";
_posted = false;
_add_more = 1;
_num_groups = 7;
_blur_check = false;
window.onload = function () {
$('#school_form-grades-list').change(
function () {
var grades_ = parseFloat($('input#number_students_set_1').val());
if (grades_ >= 10) {
$('input#number_students_set_1').removeClass('error');
} else if (grades_ <= 9) {
$('input#number_students_set_1').addClass('error');
} else {
}
});
};
$(function(){
$('#remove_set_3 a').click(function(){
remove();
});
})
function remove() {
$("#grade_level_set_" + _add_more).hide('fast');
$("#remove_set_" + _add_more).hide();
$("#select_grade_set_" + _add_more).val('');
$("#number_students_set_" + _add_more).val('');
if (_add_more == _num_groups) {
$("#bt_addGradeSet").fadeIn();
}
_add_more = _add_more - 1;
i = _add_more;
$("#remove_set_" + i).css('display', 'inline');
}