Set different input fields in form when dropdown option is selected

So I want to set different input fields dynamically in a form whenever an option in a dropdown is selected.

This is my form:

<form>
<p> Select an option: </p>
<select>
    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>
</select>
<input id="FirstOption"></input>
<input id="SecondOption"></input>
<input id="ThirdOption"></input>
<input id="FourthOption"></input>
</form>

e.g. if I select 1 it should add the first input field, if I select the second, it should remove the first and add the second one, viceversa – the reason of this is to add custom patterns for this to check validity.

I know it uses JavaScript, but I do not know how to select the different options inside the dropdown to do these functions, as well as hiding the inputs that do not correspond to the option.