JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog">
    <form>
    <select id="form_type">
        <option data-show="type_0" data-hide="type_1" selected>Show 0</option>
        <option data-show="type_1" data-hide="type_0">Show 1</option>
    </select>
    <div data-visible="type_0" data-hidden="type_1">
        <input type="text" value="im visibible for show_0" />
    </div>
    <div data-visible="type_1" data-hidden="type_0" class="hidden">
        <input type="text" value="im visibible for show_1" disabled />
    </div>
    </form>
</div>

CSS

.hidden {
    visibility:none;
    display:none;
}

JavaScript

$('#dialog').find('#form_type').on('change', function(){
    
    var self = $(this),
        selectedOption = self.find('option:selected'),
        showId = selectedOption.data("show"),
        hideId = selectedOption.data("hide"),
        parentForm = self.parents('form');
    
    parentForm
    .find('[data-visible="'+showId+'"]').removeClass('hidden')
    .find('input').prop('disabled', false);


parentForm
    .find('[data-hidden="'+showId+'"]').addClass('hidden')
    .find('input').prop('disabled', true);
    
});