JSFiddle - React, Tailwind, and code Playground

by Mohit Kumar Gupta

HTML

<select class="firstSelect">
<option value="">firstSelect</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="firstSelect">
<option value="">firstSelect</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="secondSelect">
<option value="">secondSelect</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

JavaScript

//$('select option:first').after($('<option />', { "value": '', text: '', class: '' }));
$(document).ready(function(){
$("select").each(function(i){
    $(this).find('option:first').before($('<option />', { "value": '', text: '', class: '' }));
    $(this).find('option:first').attr("selected", true); 
});
})




$(".firstSelect").change(function(){
  $(".secondSelect").val($(".secondSelect option:first").val());                                     
});

$(".secondSelect").change(function(){                 
$(".firstSelect option:first-child").attr("selected", true);                            
});