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_Ap_m">Method 1:</label></th><td><select name="Ap_m" id="id_Ap_m">
<option value="" selected="selected">Select an application method</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</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
$('#id_Ap_m').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++) {
        $('.app_method:first').clone().appendTo('.table').find('label').text('Method ' + i);
        $('.app_method:last').find('select').attr('name', 'Ap_m' + i).attr('id', 'id_Ap_m' + i);
    }
})



//form validation
$("#form1").validate({
    submitHandler: function(form) {
        SubmittingForm()
    },
    rules: {
        Ap_m: "required",
        Ap_m2: "required"
    }
})


})