JSFiddle - React, Tailwind, and code Playground

HTML

<div id="option1" class="option"> option 1 selected </div>

<div id="option2" class="option">
    option 2 selected
</div>

<div id="option3" class="option">
    <input type="text"  value="option3" />
</div>

<div id="option4" class="option">
    <input type="text"  name="option4" />
</div>

<div id="option5" class="option">
    <input type="text"  name="option5" />
</div>

<div id="option6" class="option">
    <input type="text"  name="option6" />
</div>

Security Question*:

<select name="dropdown" id="dropdown">
    <option value="1">What is your grandmothers first name?</option>
    <option value="2">What is the name of the first school you attended?</option>
    <option value="3">What is the name of the company of your first job?</option>
    <option value="4">What is your preferred musical genre? </option>
    <option value="5">What was the make and model of your first car?</option>
    <option value="6">Choose to write your own question</option>
</select>

CSS

.option {
    display: none;
}

JavaScript

$(document).ready(function() {
    $('#dropdown').change(function() {
        var dropdown = $('#dropdown').val();

        $('.option').hide();

        if (dropdown == 1) {
           $('#option1').show();
        }

        if (dropdown == 2) {
           $('#option2').show();
        }
        
        if (dropdown == 3) {
           $('#option3').show();
        }
        
        if (dropdown == 4) {
           $('#option4').show();
        }
        
        if (dropdown == 5) {
           $('#option5').show();
        }
        
        if (dropdown == 6) {
           $('#option6').show();
        }
    });
});