JSFiddle - React, Tailwind, and code Playground

HTML

<form method="" action="">
        <input type="file" placeholder="Upload Project">
        <select id="selectProvider">
            <option disabled selected> Select Training Platform </option>
            <option value="1"> Option 1</option>
            <option value="2"> Option 2 </option>
            <option value="3"> Option 3 </option>
            <option value="4"> Option 4 </option>
            <option value="5"> Option 5 </option>

        </select>
    </form>
    
    <select data-role="1" style="display: none;">
    <option> Option 11 </option>
    <option> Option 12 </option>
    <option> Option 13 </option>
</select>
    
    
    <select data-role="2" style="display: none;">
    <option> Option 21 </option>
    <option> Option 22 </option>
    <option> Option 23 </option>
</select>

     <select data-role="3" style="display: none;">
    <option> Option 31 </option>
    <option> Option 32 </option>
    <option> Option 33 </option>
</select>


 <select data-role="4" style="display: none;">
    <option> Option 41 </option>
    <option> Option 42 </option>
    <option> Option 43 </option>
</select>

JavaScript

$('#selectProvider').on('change', function(){
    var role = $(this).val();
    switchRole(role);

});

function switchRole(role) {

    var sel = $('select[data-role= ' + role + '   ]');
    sel.show();
    hideSelects(role, sel)
    
};

hideSelects = function(role, selected) {
    var elements = $("select").filter(function() {
        return $(this).data("role") !== undefined;
    });
    var toHide = $(elements).not(selected);
    toHide.hide();
};