JSFiddle - React, Tailwind, and code Playground

HTML

<select class="firstSelect">
  <option value="" data-s=""></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="" data-s=""></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="" data-s=""></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

var elem = $('.firstSelect, .secondSelect');

elem.change(function(){
	var data = $(this).find('option:selected').attr('data-s');
  elem.find('option[data-s="'+data+'"]').prop('selected', true);
});