JSFiddle - React, Tailwind, and code Playground

HTML

<select name="servicesSelect" id="selectService">
<option value="chooseService">Choose your service</option>
<option value="service1">Service 1</option>
<option value="service2">Service 2</option>
<option value="service3">Service 3</option>
<option value="service4">Service 4</option>
<option value="service5">Service 5</option>
</select>
<br />
<br />
Hidden Email list feild
<br />    
<!--The oredr of the email addresses must match the order of services above-->
<input type="text" name="firstname" class="emailfield" value="[email protected];[email protected];[email protected];[email protected];[email protected]">
<br />
<br />
Hidden Email to feild
<br />
<input type="text" name="firstname" class="inputfield">
<br />

JavaScript

$(document).ready(function(){
   
    /*variable that gets the value (.val) of the .emailField and splits it where it sees a ;*/
    var emailList =  $(".emailfield").val().split(";");
    
    /*function that notices a change (.change) in the value of #selectService dropdown*/
    $("#selectService").change(function(){
        
        /*variable 'selectedIndex' gets the index number of the option selected in the dropdown - the result is a number and stored in 'selectedIndex'*/
        var selectedIndex = $("#selectService")[0].selectedIndex - 1;
        
        /*variable 'emailToUse' is equal to an array out our emails of which one is selected using the selectedIndex variable, the [] simply dictates the number of the email to use from the list*/
        var emailToUse = emailList[selectedIndex];
        
        /*sets the value of .inputField to emailToUse which has been selected from the list by the variable above*/
         $(".inputfield").val( emailToUse );
    })

})