JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="selectContainer">
        <select id="theSelect">
            <option value="">- Select -</option>
            <option value="Patient">Patient</option>
            <option value="Physician">Physician</option>
            <option value="Nurse">Nurse</option>
        </select>
    </div>
    <div class="hidden isPatient">Patient <a href="#" class="remove" rel="Patient">remove</a></div>
    <div class="hidden isPhysician">Physician <a href="#" class="remove" rel="Physician">remove</a></div>
    <div class="hidden isNurse">Nurse <a href="#" class="remove" rel="Nurse">remove</a></div>
</body>

CSS

.hidden {
    display: none;
}

JavaScript

$("#theSelect").change(function(){          
    var value = $("#theSelect option:selected").val();
    if (value === '') return;
    var theDiv = $(".is" + value);
    
    theDiv.slideDown().removeClass("hidden");
    $("#theSelect option:selected").attr('disabled','disabled');
    $(this).val('');
});
    
    
$("div a.remove").click(function () { 
    var value = $(this).attr('rel');
    var theDiv = $(".is" + value);
    
    $("#theSelect option[value=" + value + "]").removeAttr('disabled');
    
    $(this).parent().slideUp(function() { $(this).addClass("hidden"); });
});