JSFiddle - React, Tailwind, and code Playground

HTML

<select id="sel1">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select id="sel2">
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select id="sel3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected="selected">3</option>
    <option value="4">4</option>
</select>
<select id="sel4">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4" selected="selected">4</option>
</select>

JavaScript

$(document).ready(function() {
  var prevValue;
  $('select').focusin(function() {
      prevValue = $(this).val();
  }).change(function() {
      var selValue = $(this).val(), self = this;
      // set prev val to the select that has the current select val
      $('select').each(function() {
        if(this != self && $(this).val() == selValue) {
            $(this).val(prevValue);
            return false;
        }
      })
      $(this).blur();
  })
})