JSFiddle - React, Tailwind, and code Playground

HTML

<div class="b-item">
  <select class="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--2">
    <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--2">
    <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

$(function() {
  $('.select').change(function() {
    var selected = $(this).find('option:selected');
    $('option:selected').html(selected.data('foo'));

    var select2 = $('.select--2');
    var valueSelect2 = select2.val()
    var parentSelect2 = select2.parents('.b-item');
    var parentSelect2Item = $('.b-item__info', parentSelectSortSize);
    parentSelect2Item.text(valueSelect2);

  }).change();
});