JSFiddle - React, Tailwind, and code Playground

by godhong

HTML

<script src="http://www.webreference.com/programming/javascript/jquery/form_validation/jquery.validate.js"></script>
<form id="form1" action="przm_output.html" method="GET">
<table class="table" align="center">
    
<tr><th><label for="id_NOA">Number:</label></th><td><select name="NOA" id="id_NOA">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td></tr>

<tr><th><label for="id_Apt">Application timing 1:</label></th><td><select name="Apt" id="id_Apt">
<option value="" selected="selected">Select an application timing</option>
<option value="1">Relative to planting</option>
<option value="2">Relative to emergence</option>
</select></td></tr>
    
</table>
<div align="center"><tr><input type="submit" value="Submit"></tr></div>  
    
</form>

JavaScript

//build the dynamic form on the fly
$(document).ready(function() {
    $('#id_Apt').closest('tr').addClass('app_method');

    $('#id_NOA').change(function() {

        var total = $(this).val();
        $('.app_method').each(function(index) {
            if (index != 0) $(this).remove();
        });

        for (var i = 2; i <= total; i++) {
            $('<tr class="app_method"><th><label for="id_Apt">Application timing' + i + ':</label></th><td><select name="Apt' + i + '" id="id_Apt' + i + '"><option value="" selected="selected">Select an application timing</option><option value="1">Relative to planting</option><option value="2">Relative to emergence</option></select></td></tr>').appendTo('.table')

        }
    })
})
//form validation, I would like to check whether or not the selections from Method are the same. I think this could be done in a for loop, but I failed...
$("#form1").validate({
    submitHandler: function(form) {
        SubmittingForm();
    },
    rules: {
        Apt: "required",
        Apt2: "required",
        Apt3: "required"
    }
})