JSFiddle - React, Tailwind, and code Playground

by Mohit Kumar Gupta

HTML

<form id="editAccDetils" >
	 <select class="notBlankSelect">
		<option value="">0</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="">0</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="">0</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="">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
	</select>
</form>

JavaScript

$("#editAccDetils select").each(function(){
    if($(this).hasClass("notBlankSelect")==false){
		$(this).find('option:first').before($('<option />'));
		$(this).find('option:first').attr("selected",true);
	}
});

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

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