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

Question

Я настраиваю несколько выпадающих меню для пользователей, чтобы настроить свой кофе на нашем веб-сайте Blended Joe на платформе Shopify, используя стороннее приложение Shopify под названием Infinite Options, чтобы обойти ограничение в 3 выпадающих меню.С текущим макетом пользователь может:

1. Выбрать источник
2. Выбрать Жаркое для этого источника
3. Сделать смесь / Выбрать второй вариант (Выбор этой опции покажет скрытый div, который позволит пользователю завершить жаркое для второго источника, который он выбрал и завершил выбор соотношения первого и второго смесей.

У бесконечных опций то же самоевыберите класс для всех раскрывающихся списков, однако он позволяет вам создать класс и элемент имени, который будет использоваться для стилей или селекторов.

Моя проблема заключается в том, что после выбора первого источника в качестве Индонезии оно влияет на выбор типа жареного мяса (ожидается), но это также влияет на второй вариант Roast Choice.

Есть ли способ использовать функцию addClass () для указания выпадающего списка, на который я хочу повлиять, или есть способ указать мои селекторы, чтобы он нацеливался направильный выпадающий список?

Я попытался создать условное выражение, в котором для указания правильного удаления используется атрибут name.down

  $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground").change(function(){
  if ($('[name="properties[First Origin Choice]"]').val() == "Indonesia"){
    $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground option[value = 'Light Roast']").hide()
  }else
    {
      $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground option[value = 'Light Roast']").show()
    }

    if ($('[name="properties[First Roast Choice]"]').val() == "Light Roast"){
    $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground option[value = 'Indonesia']").hide()
  }else
    {
      $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground option[value = 'Indonesia']").show()
    }


  $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground option:selected").attr('disabled', 'disabled').siblings().removeAttr('disabled');
});

//second Origin Selection
   $('select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground [name="properties[Second Roast Choice]"]').change(function(){
  if ($('select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground [name="properties[Second Origin Choice]"]').val() == 'Indonesia'){
    $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground option[value = 'Light Roast']").hide()
  }else
    {
      $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground option[value = 'Light Roast']").show()
    }
});

Вы увидите полный код на codepen: https://codepen.io/jcssll/pen/eXwRzW, который на данный момент не работает должным образом на Mac, но функциональность выбора индонезийского происхождения и удаления опции Light Roastзначение хорошо работает на моем ноутбуке Windows.