JSFiddle - React, Tailwind, and code Playground

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>

JavaScript

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

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


        var count_c = $(this).val();

        while (i <= count_c) {
            if (i <= count_c) {

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

        }
    });

});