JSFiddle - React, Tailwind, and code Playground

by godhong

HTML

<table class="table"><tr><th><label for="id_NOA">Number of applications:</label></th><td><select id="id_NOA" class="valid" name="NOA"><option selected="selected" value="">Choose</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></td></tr>

JavaScript

$(document).ready(function() {
    $('#id_NOA').change(function() {
        
        var total = $(this).val();
        $('.app_timing').remove();
        $('.app_dates').remove();
        
        for (var i = 1; i <= total; i++) {

            $('<tr class="app_timing"><th><label for="id_Apt' + i + '">Application timing ' + i + ':</label></th><td><select name="Apt' + i + '" id="id_Apt' + i + '"><option value="" selected="selected">Select an application timing</option><option value="1">Default</option><option value="2">Enter your own</option></select></td></tr>').appendTo('.table')

            $('<tr class="app_dates"><th><label for="id_Date_apt">Application Date ' + i + ':</label></th><td><input readonly="readonly" type="text" name="Date_apt' + i + '" value="MM/DD" id="id_Date_apt' + i + '"/><td></tr>').appendTo('.table')

            $('.app_timing:last').find('select').bind('change', function() {
                if ($(this).val() == '1') {
$(this).closest('.app_timing').next().hide()
                }

            })
        }
    })


})