JSFiddle - React, Tailwind, and code Playground

by godhong

HTML

<div class="form-fields">

<table>
<tr><th><label for="id_NOA">Number of Applications:</label></th><td><select name="NOA" id="id_NOA">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
    
</select></td></tr>
    
<tr><th><label for="id_Ap_m">Application 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">Aerial</option>
<option value="2">Ground Sprayer</option>
</select></td></tr>

<tr><th><label for="id_Ar">Application rate:</label></th><td><input type="text" name="Ar" value="1" id="id_Ar" /></td></tr>
    
</table>

</div>
<a href="#" id="add">Add</a> | <a href="#" id="remove">Remove</a>  
<input name="submit" type="button" class="submit" value="Submit" />
</form>

JavaScript

$(document).ready(function() {
    i = 2;
    count_p=2;
    $("label[for='id_Ar']").html('Application rate 1:');

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

        var count_c = $(this).val();
        for (i=count_p,i<=count_c+1;i++){

    $('<tr><th><label for="id_Ap_m">Application method ' + i + ':</label></th><td><select name="Ap_m" id="id_Ap_m"><option value="" selected="selected">Select an application method</option><option value="1">Aerial</option><option value="2">Ground Sprayer</option></select></td></tr>').appendTo("table");

    $('<tr><th><label for="id_Ar">Application rate ' + i + ':</label></th><td><input type="text" name="Ar" value="1" id="id_Ar" /></td></tr>').appendTo("table");

            // $('<tr><th><label for="id_Ar">' + j + ':</label></th><td><input type="text" name="Ar" value="1" id="id_Ar" /></td></tr>').appendTo("table");     
        }
    //$('#id_NOA').val(i);
    //i++;

    });



});