Применить функцию изменения для нескольких выборок с тем же классом

Question

Я хочу применить функцию изменения для нескольких выборок с одним и тем же классом. То, что я хочу, это когда вы выбираете параметр с тем же значением, что и вкладка данных, содержимое этой вкладки будет отображаться. Также возможно ли выбрать по умолчанию первый вариант со значением = 0? Мой код работает нормально, но только для первой группы выбора. Это то, что у меня есть: https://codepen.io/tonyart/pen/VwwBzbP

<script>
$('.tab-content').hide();
$('#select-box').change(function () {
  var tab = $(this).children("option:selected").val();
  $(".tab-content").removeClass("selected").hide();
  $('.tab-content[data-tab=' + tab + ']').addClass("selected").show(); 
});
</script>

<select id="select-box">
   <option>select year</option>
   <option value="0">2018</option>
   <option value="1">2017</option>
</select>
<div id="" class="tab-content" data-tab="0">
  content 2018 first
</div>
<div id="" class="tab-content" data-tab="1">
  content 2017 first
</div>
<select id="select-box">
   <option>select year</option>
   <option value="2">2018</option>
   <option value="3">2017</option>
</select>
<div id="" class="tab-content" data-tab="2">
  content 2018 second
</div>
<div id="" class="tab-content" data-tab="3">
  content 2017 second
</div>

Answer 1

Вы не можете иметь несколько элементов с одинаковым Id, идентификатор должен быть уникальным.

Поэтому я изменил <select id="select-box"> на <select class="select-box">

Вы можете использоватьэтот код:

$('.tab-content').hide();
$('.select-box').change(function() {
  var tab = $(this).children("option:selected").val();
  $(this).nextAll(".tab-content").removeClass("selected").hide();
  $(this).nextAll('.tab-content[data-tab=' + tab + ']').addClass("selected").show();
});

Демо

$('.tab-content').hide();
$('.select-box').change(function() {
  var tab = $(this).children("option:selected").val();
  if ($.isNumeric(tab)) {
    $(this).nextAll(".tab-content").removeClass("selected").hide();
    $(this).nextAll('.tab-content[data-tab=' + tab + ']').addClass("selected").show();
  }
});

$('.select-box').trigger("change")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select-box">
  <option>select year</option>
  <option value="0" selected>2018</option>
  <option value="1">2017</option>
</select>
<div id="" class="tab-content" data-tab="0">
  content 2018 first
</div>
<div id="" class="tab-content" data-tab="1">
  content 2017 first
</div>
<select class="select-box">
  <option>select year</option>
  <option value="2">2018</option>
  <option value="3">2017</option>
</select>
<div id="" class="tab-content" data-tab="2">
  content 2018 second
</div>
<div id="" class="tab-content" data-tab="3">
  content 2017 second
</div>