JSFiddle - React, Tailwind, and code Playground
HTML
<select name="MinExperience" id="MinExperienceDropDown" style="width: 32%" class="select">
<option value="">--Minimum--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="MaxExperience" id="MaxExperienceDropDown" style="width: 32%; float: right;
margin-right: 82px" class="select">
<option value="">--Maximum--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
JavaScript
$("#MinExperienceDropDown").change(function () {
if ((($(this).val()) != "" && ($("#MaxExperienceDropDown").val() != "")) && ($("#MaxExperienceDropDown").val() != "") && ($(this).val() > $("#MaxExperienceDropDown").val())) {
alert('Minimum expreience should be less than maximum');
}
});
$("#MaxExperienceDropDown").change(function () {
if ($(this).val() < $("#MinExperienceDropDown").val()) {
alert('Maximum expreience should be greater than minimum');
}
});