JSFiddle - React, Tailwind, and code Playground

HTML

<select class="firstSelect">
  <option value=""></option>
  <option value="first" data-s="first">first main</option>
  <option value="second" data-s="second">second main </option>
  <option value="third" data-s="third">third main</option>
</select>

<select class="secondSelect">
  <option value=""></option>
  <option value="1" data-s="first">first</option>
  <option value="2" data-s="second">second</option>
  <option value="3" data-s="third">third</option>
</select>
<select class="secondSelect">
  <option value=""></option>
  <option value="1" data-s="first">first</option>
  <option value="2" data-s="second">second</option>
  <option value="3" data-s="third">third</option>
</select>

JavaScript

(function() {
  var first = document.getElementsByClassName('firstSelect')[0],
    second = document.getElementsByClassName('secondSelect')[0];
  first.onchange = function() {
    second.selectedIndex = this.selectedIndex;
  };
  second.onchange = function() {
    first.selectedIndex = this.selectedIndex;
  };
})();