How do i make a form input tag appear if i select male and bring out another form input tag appear if i select female

Question

I need two inputs tag to be hidden when the form loads . if user select male ..I need to show a form select that was hidden and select an option to show me a form with id such as Gown, shirt, Blouse so the user can fill the form and summit it

Answer 1

<select onchange="change(this)">
<option value="male">Male</option>
<option value="female">Female</option>
</select>

<select data-option="male">
</select>
<select data-option="female">
</select>

function change(el) {
var visible = document.querySelectorAll("[data-visible='true']");
for(var a = 0; a < visible.length; a++) {
visible[a].removeAttribute("data-visible")
visible[a].style.display = "none";
}
var query = document.querySelectorAll("[data-option='" + el.value + "']")
for(var a = 0; a < query.length; a++) {
query[a].style.display = "block";
query[a].setAttribute("data-visible", "true")
}
}

Answer 2

I will explain more so you can throw more light

Answer 3

Is this jquery? Can't it be done with js