JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div id="mySelects">
<select id="select">
    <option value="option1">Option 1</option>
	<option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
</select>

    <input value="Option 1 is Selected" id="option1" /> 
    <!-- id is equal to option value -->  
    <input value="Option 2 is Selected" id="option2" />
    <input value="Option 3 is Selected" id="option3" />
    <input value="Option 4 is Selected" id="option4" />
    </div>   
    
    <!-- id changes with dropdown selection -->
    <input class="lastInput" value="My ID is - select1" />

CSS

/* all inputs hidden on load */
input {
    display:none;
}

#option1,
#select1 {
    display: inline;
}

.lastInput {
    display:block;
}

JavaScript

// Specific Function for Dropdown
 $(function() {
    
     //on change
    $('#select').change(function() {
        //get the value of dropdown e.g. 'option1'
        var thisVal = $(this).val();
        //hide all the textboxes, then filter our desired textbox and show it
        $('#mySelects input').hide().filter('#'+thisVal).show();  
        
        //get the option value and extract the number e.g. option1 becomes 1
        var inputNum = thisVal.substring(thisVal.length-1);               
        $('.lastInput').attr("id", "select"+inputNum).val('My ID is - select'+inputNum);
    });  
    
    
});