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><input type="text" name="NOA" value="1" id="id_NOA" /></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
    $("label[for='id_Ar']").html('Application rate 1:');

    $('#add').click(function() {

        $('<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");

        $('#id_NOA').val(i);
        i++;

    });



});