JSFiddle - React, Tailwind, and code Playground

HTML

<select id="regionList" size= 5>
  <option value="1|1">1</option>
  <option value="2|2">2</option>
  <option value="3|3">3</option>
  <option value="4|4">4</option>
</select>
<button id="deleteRegionButton" >blah</button>
<select id="regionListModal" size=5>
  <option value="1|1">1</option>
  <option value="2|2">2</option>
  <option value="3|3">3</option>
  <option value="4|4">4</option>
</select>

<input id="siteNameInput" list="siteList" class="form-control" autocomplete="off" required="required" name="siteLongName" value="EAU CLAIRE DC">
<datalist id="siteList">
            <option text="EAU CLAIRE DC" name="3039">EAU CLAIRE DC</option>
            <option text="PLano DC" name="3239" >PLano DC</option>
          </datalist>
</input>

JavaScript

$('#deleteRegionButton').on('click',function(){
 $('#regionListModal option[value="' + $('#regionList option:selected').val() +  '"]').attr("selected","selected"); 
 alert($("#regionListModal option").length);
 alert($("#regionListModal option").size());
});

$("#siteNameInput").on("change", function() {
  var siteName = $(this).val();

  $("#siteList").find("option").each(function() {
    alert($(this).val() + " " + siteName);
    if ($(this).val() == siteName) {
       alert($(this).attr("name"));  
     
    }
  }); 
});