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 class="app_method">
            <th><label>Application method 1:</label></th>
            <td>
                <select name="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 class="app_rate">
            <th><label>Application rate:</label></th>
            <td><input type="text" name="Ar" value="1" /></td>
        </tr>
    </table>
</div>

JavaScript

$(document).ready(function() {

    $('#id_NOA').change(function(){
        
        var total = $(this).val();
        
        //remove all
        $('.app_method').each(function(index){
            if (index != 0) $(this).remove();
        });
        $('.app_rate').each(function(index){
        alert(index);
            if (index != 0) $(this).remove();
        });
        
        //create new ones
        for (var i = 2; i <= total; i++)
        {
            $('.app_method:first').clone().appendTo('table');
            $('.app_rate:first').clone().appendTo('table');
        }
        
    });

});