JSFiddle - React, Tailwind, and code Playground

by inser

HTML

<div class="q-question">
    <div data-datalot="year"></div>
    <label>Year<input type="text" />
</div>
    <div class="q-question">
    <div data-datalot="make"></div>
    <label>Make<input type="text" />
</div>
        <div class="q-question">
    <div data-datalot="model"></div>
    <label>Model<input type="text" />
</div>
            <div class="q-question">
    <div data-datalot="submodel"></div>
    <label>Submodel<input type="text" />
</div>

JavaScript

$(function() {   
    var model = { 
        year: { select : {}, textbox : {} },
        make: { select : {}, textbox : {} },
        model: { select : {}, textbox : {} },
        submodel: { select : {}, textbox : {} },
    };
    
    var textobexes
    
   $('[data-datalot]').each(function() {
        var textbox = $(this)
            .parents('.q-question')
            .find('input[type=text]');
        
        var select = $('<select />');
               
        //textbox.hide();
        textbox.after(select);
       
       var element = $(this).attr('data-datalot');
       
       model[element].select = select;          
       model[element].textbox = textbox;
    });
       
    
    console.log(model);
    fillModel();
    
    function fillModel() {
        fillYears(model.year.select, yearChanged);
    }
    
    function fillYears(select, callback) {
        var years = [];
        for(var i = 1980; i <= 2013; i++) {
            years.push(i);
        }
        
        fillSelect(select, years, callback);
    }
    
    function yearChanged() {
        var items = [];
        items[0] = 'year';
        loadData(items, function(data) { fillSelect(model.make.select, data, makeChanged) });
    }
    
    function makeChanged() {
        var items = [];
        items[0] = 'year';
        items[1] = 'make';
        loadData(items, function(data) { fillSelect(model.model.select, data, modelChanged) });
    }
    
    function modelChanged() {
        var items = [];
        items[0] = 'year';
        items[1] = 'make';
        items[2] = 'model';
        loadData(items, function(data) { fillSelect(model.submodel.select, data, updateTextboxes) });
    }
    
    function updateTextboxes() {
        model.year.textbox.val(model.year.select.val());
        model.make.textbox.val(model.make.select.val());
        model.model.textbox.val(model.model.select.val());
        model.submodel.textbox.val(model.submodel.select.val());
    }
    
    function...