JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" action="javascript:void(0)">
    
    <select name="name" onchange="return namedata(this.value);">
        <option value="AA">PLEASE CHOOSE</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    
    Lorem ipsum..<br/>
    <div style="display: block;" id="divaa">
        Choose in the first dropdown first
    </div>
    
    <div style="display: none;" id="diva">
        <select name="produkt" id="field1">
            <option value="11">AA</option>
            <option value="12">AB</option>
            <option value="12">AC</option>
        </select>
    </div>
    
    <div style="display: none;" id="divb">
        <select name="produkt" id="field2">
            <option value="31">BA</option>
            <option value="32">BB</option>
        </select>
    </div>
    
    <div style="display: none;" id="divc">
        <select name="produkt" id="field3">
            <option value="21">CA</option>
            <option value="22">CB</option>
        </select>
    </div>
    
    <button>Send</button>
    
</form>

JavaScript

$(document).ready(function() {
    $( "form" ).on( "submit", function( event ) {
        event.preventDefault();
        console.log( $( this ).serialize() );
    });
});

function namedata(data) {
    if (data == 'AA') {
        $('#divaa').css('display', 'block');
        $('#divb').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#divc').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#diva').css('display', 'none').find("select").prop("disabled", "disabled");
        
        
    }
    if (data == 'A') {
        $('#diva').css('display', 'block').find("select").prop("disabled", false);
        $('#divb').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#divc').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#divaa').css('display', 'none');
        
        
    }
    else if (data == 'B') {
        $('#divb').css('display', 'block').find("select").prop("disabled", false);
        $('#diva').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#divc').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#divaa').css('display', 'none');
        
    }
    else if (data == 'C') {
        $('#divc').css('display', 'block').find("select").prop("disabled", false);
        $('#diva').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#divb').css('display', 'none').find("select").prop("disabled", "disabled");
        $('#divaa').css('display', 'none');
        
    }
}