JSFiddle - React, Tailwind, and code Playground

HTML

<div class="b-item">
    <select class="select js-select">
        <option value="" data-foo="data1">1</option>
        <option value="" data-foo="data2">2</option>
        <option value="" data-foo="data3">3</option>
    </select>
</div>
<div class="b-item">
    <div class="b-item__info">50</div>
    <select class="select select--2 js-select">
        <option value="50" data-foo="data1">1</option>
        <option value="85" data-foo="data2">2</option>
        <option value="93" data-foo="data3">3</option>
    </select>
</div>
<div class="b-item">
    <div class="b-item__info">3</div>
    <select class="select select--2 js-select">
        <option value="3" data-foo="data1">1</option>
        <option value="8" data-foo="data2">2</option>
        <option value="15" data-foo="data3">3</option>
    </select>
</div>

CSS

.b-item {
  margin: 15px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.b-item__info {
  margin-right: 10px;
  font-weight: 700;
  color: #00f;
  font-size: 20px;
}

JavaScript

var $select = $('.js-select');

earth();
$select.on('change', earth);

function earth(e) {
	var $el = e ? $(e.target) : $select;
	var foo = $el.find(':selected').data('foo');
	var $selected = $select.not(':first').find('[data-foo='+ foo +']');
	$selected.prop('selected', true).text(foo);
	$select.each(function(){
		$(this).prev('.b-item__info').text(this.value);
	});
}