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');
  first.onchange = function() {
  	var index = this.selectedIndex;
    for (var i = 0; i < second.length; i++) {
      second[i].selectedIndex = index;
    }
  }
  for (var i = 0; i < second.length; i++) {
    second[i].onchange = function() {
      first.selectedIndex = this.selectedIndex;
      first.onchange();
    }
  }
})();