JSFiddle - React, Tailwind, and code Playground

HTML

<!--Testing with arrays-->
                    <form data-validation="none" id="find-term-sheet">
                        <fieldset class="spacer" id="find-term-sheet-fields">
                            <label for="fff1" class="block">
                                Which MarketSafe Term Sheet are you looking for?
                                <div class="clearfix">
                                    <div class="d1-d3">
                                        <select id="fff1">
                                            <option value="">Please Select</option>
                                            <option value="em">Emerging Markets<sup>SM</sup> CD</option>
                                            <option value="tm">Timeless Metals<sup>SM</sup> CD</option>
                                            <option value="dc">Diversified Commodities CD</option>
                                            <option value="cr">Currency Returns CD</option>
                                            <option value="dm">Diversified Metals CD</option>
                                            <option value="bc">BRIC CD</option>                                            
                                            <option value="gb">Gold Bullion CD</option>
                                            <option value="sb">Silver Bullion CD</option>
                                            <option value="jr">Japanese REIT CD</option>
                                            <option value="sp">S&amp;P 500 CD</option>    
                                        </select>
                                    </div>
                                </div>
                            </label>
                        </fieldset>
                        
                        <input type="submit" value="Find" disabled="disabled" id="findForms">
                        
                    </form>
                                                <div...

JavaScript

$(function () {
    $('#find-term-sheet').on('change', 'select', function () {
        if ($(this).val() != '') {
            if ($(this).attr('id') == 'fff1') {
                q2($(this).val());
                $('#findForms').attr('disabled', 'disabled');
                return;
            }
            $('#findForms').removeAttr('disabled');   //enables the submit button
        } else {
            $('#findForms').attr('disabled', 'disabled');  //this line disables the submit button
        }
    });
    $('#find-term-sheet').submit(function () {//take out the months that doesn't have anything to show
        $(".term-results").html('');
        $.each(cd[$("#fff1").val()], function (k, v) {
            if($("#fff2").val() == v.date){
                $(".term-results").append($("<div />").text(v.date));
            }
        });
        return false;
    });
});
var q2 = function(index){
        $("[for='fff2']").remove();
        $("#find-term-sheet-fields").append('\
                <label for="fff2" class="block">\
                    Year issued?\
                    <div class="clearfix">\
                        <div class="d1-d3">\
                            <select id="fff2">\
                                <option value="">Please Select</option>\
                            </select>\
                        </div>\
                    </div>\
                </label>');
        var prev = "";
        $.each(cd[index].sort(function (a, b) { return b.date - a.date; }), function (k, v) {
            if (v != undefined) {
                if(prev - v.date != 0){
                    console.log([prev,v.date, prev - v.date]);
                    $("#fff2").append($("<option />").attr("value",v.date).text($.datepicker.formatDate("MM d, yy",v.date)));
                    prev = v.date;
                }
            }
        });
        //$("#fff2").styleSelect();
    },
    cd = {
        em: [
            {
                date: new...