Две формы начальной загрузки с одинаковым стилем Javascript

Question

Я пытаюсь получить две формы начальной загрузки, которые используют один и тот же JS, но не влияют друг на друга (при нажатии одной, другая не меняется). Должно быть два списка имен цветов, причем они отображаются в цветах, описанных во всех случаях (в списке первая запись, видимая до щелчка, и запись, видимая после щелчка). У меня есть пример JSFiddle, который является одним из способов там. Я хочу сохранить поведение при наведении, которое у меня есть в моем примере, когда цвет текста сохраняется, когда курсор мыши находится над мышью, а фон становится лишь немного более серым, в отличие от поведения по умолчанию, когда текст становится белым, а фон - синим. Я понимаю, что обе мои формы имеют один и тот же идентификатор "select" и должны отличаться, но если посмотреть на верхнюю форму, как сейчас, можно хотя бы продемонстрировать, какое поведение я хочу для обеих.

Как JSFiddle

HTML

<div class="selectContainer">
  <select class="form-control pickerSelectClass" id="select">
    <option value="red" style="color:red">Red</option>
    <option value="blue" style="color:blue">Blue</option>
  </select>
</div>

<div class="selectContainer">
  <select class="form-control pickerSelectClass" id="select">
    <option value="red" style="color:red">Red</option>
    <option value="blue" style="color:blue">Blue</option>
  </select>
</div>

JS

$(document).ready(function() {  
  $(".pickerSelectClass").selectpicker();   

  $("#select").selectpicker("refresh");
  $('.filter-option').css("color",$('#select').val());
   $('#select').on('change', function(){
    $('.filter-option').css('color', $(this).val());
  });
});

Answer 1

Это работает. Также убедитесь, что idс уникальны.

$(document).ready(function() {  
      $(".pickerSelectClass").selectpicker();   

      $('select').each(function(index, item){
            $(this).parent().find('.filter-option').css("color",$(this).val());
      }).on('change', function(){
            $(this).parent().find('.filter-option').css("color",$(this).val());
      });
});