When a specific form option is selected a new input appears, using JavaScript

I'm trying to get the following concept working (bare in mind my JavaScript knowledge is minimal).

A select option is provided, with fields like:

• email


• address


• marriage

So on...

When a field is selected a input for that field needs to appear, I've worked out the way to get a single input to appear but when wanting more than one option to have its own input is where it gets confusing!

<select name="retrieveMarriage" onchange="document.getElementById('otherdetail').style.display = (this.selectedIndex === 2) ? 'block' : 'none';">
 <option value='' disabled selected style='display:none;'>Select Field To Update</option>
<option value="No">Address</option>
<option value="Yes">Email</option>
</select>
<div id="otherdetail" style="display: none;">
<input type="text" placeholder="Enter NEW Email..."       onClick="$(this).removeClass('placeholderclass')" class="dateclass placeholderclass">
</input></div><br>

Where am I going wrong? How would I make it so each option value has its own extra input that is made visible when being selected.