JSFiddle - React, Tailwind, and code Playground

HTML

<select name="courses_offered" id="courses_offered">
    <option value="default">---Select---</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div id="course_catalog"></div>

JavaScript

$(document).ready(function () {
    $('select').change(function () {
        var option = $(this).val();
        showFields(option);
        return false;
    });
    
    var $increment_num = $('#course_increment_num');
var interval = 1000;  //3000 = 3 seconds
function getCourseId() {
    $.ajax({
        type: 'POST',
        url: 'courseAutoIncrement.php',
        data: $(this).serialize(),
        dataType: 'json',
        success: function (data) {
            var $cloned = $('#course_catalog');    
            var num = parseInt(data);
            $increment_num.val(num);
            
            $cloned.each(function(i){
                var $this = $(this);
                $this.find('[name^="new_course_"]').first().val(num+i);
            })
        },
        complete: function (data) {
            // Schedule the next
            setTimeout(getCourseId, interval);
        }
    });
}

    function showFields(option) {

        var content = '';
        for (var i = 1; i <= option; i++) {
            content += '<div id="course_' + i + '"><label>Course # ' + i + '</label><br /><label>Course Name:</label> <select id="coursename_' + i + '" name="coursename_' + i + '" class="ddlcss"><option value="">--- Select ---</option>"'
            content += '<option value="1">Biology</option>';
            content += '<option value="2">Calculus</option>';
            content += '<option value="3">Other - Not Listed</option>';
            '"';

            content += '</select><div class="hideNewCourse" style="display:none;"><label for="newCourse_' + i + '">Add Course Name to List:</label><input type="text" id="newCourse_' + i + '" name="newCourse_' + i + '"/></div></br></div>';

        }
        $('#course_catalog').html(content);
    }

    $(document).on('change', "[id^=coursename_]", function () {
        var $this = $(this);
        if ($this.val() == "3") {
           $(this).closest('div').find(".hideNewCourse").show();
        } else {
           ...