JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div>
    <label for="select_box1">Select A or B</label>
    <select id="select_box1" name="select_box1" class="select_box" data-select="select1">
        <option value="A">A</option>
        <option value="B">B</option>
    </select>
</div>
<div class="hidden" data-select="select1A">
    <label for="inputA">Put inyour name</label>
    <input id="inputA" name="inputA">
</div>
<div class="hidden" data-select="select1B">
    <label for="inputB">Put inyour age</label>
    <input id="inputB" name="inputB">
</div>
<div>
    <label for="select_box2">Select D or C</label>
    <select id="select_box2" name="select_box2" class="select_box" data-select="select2">
        <option value="C">C</option>
        <option value="D">D</option>
    </select>
</div>
<div class="hidden" data-select="select2C">
    <label for="inputC">Put inyour Hieght</label>
    <input id="inputC" name="inputC">
</div>
<div class="hidden" data-select="select2D">
    <label for="inputD">Put inyour Weight</label>
    <input id="inputD" name="inputD">
</div>
</body>

CSS

.hidden {
 display:none;   
}

JavaScript

$(function(){
    $('.select_box').change(function() {
        var selectData = $(this).attr("data-select");
        var selectValue = $(this).val();
         if($("div[data-select='" + selectData + selectValue +"']").css("display") == "none"){
             $("div[data-select^='" + selectData + "']").hide();
             $("div[data-select='" + selectData + selectValue +"']").show();
         }
    });
});