shows input text when add item in dropdown is clicked

I have a dropdown where the values are fetched from the database,
![enter image description here](

)

now, when the last option which is the " ADD ELEMENTARY SCHOOL" is selected, I want the dropdown to be hidden and an input text will **replace** the dropdown that will let the user enter a not existing data like this one. Thanks

![enter image description here](

)

This is my html code.
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<select id="elemschool" class="form-control">
<?php
$select=$dbcon->query("Select * from elem_school");
while ($row=$select->fetch_array()) {
?>
<option value="<?php echo $row['Elem_ID']?>">
<?php echo $row['School_Name']?>
</option>
<?php
}
?>
<option style="background-color: #77A5F8" class="addelem" value="addelementary">- ADD ELEMENTARY SCHOOL -</option>

</select>

<input type="text" class="form-control hidden" name="elem_school" id="elem_school" placeholder="NAME OF SCHOOL">

</div>

<!-- end snippet -->