Обновление атрибутов данных кнопки на основе изменений отдельных элементов формы

Question

Я работаю на сайте Snipcart, где атрибуты данных для цен на .button элемент обновляется на основе выбранных переключателей.

В настоящее время то, что у меня работает, это нормально:

HTML

<fieldset class="pill-container">
<legend>Choose your length of subscription</legend>
<label for="sub_length-3">
  <input type="radio" 
    name="sub_length" 
    id="sub_length-3" 
    value="3" 
    data-price="35" 
    data-total="105">
  <span>3 months</span>
</label>
<label for="sub_length-6">
  <input type="radio" 
    name="sub_length" 
    id="sub_length-6" 
    value="6" 
    data-price="33" 
    data-total="198">
  <span>6 months</span>
</label>
<label for="sub_length-12">
  <input type="radio" 
    name="sub_length" 
    id="sub_length-12" 
    value="12" 
    data-price="31" 
    data-total="372">
  <span>12 months</span>
</label>
</fieldset>

<span class="price">$<b>35</b></span>

<a href="#" 
  class="button" 
  data-item-id="XXXXX-3" 
  data-item-name="Name" 
  data-item-price="105" 
  data-item-description="3 months subscription">Add to cart</a>

JS

<script>
$("[name=sub_length]").on("change", function(){
  var sub_length = $(this).val();
  var description = sub_length + " months subscription";
  var price       = $(this).data("price");
  var total       = $(this).data("total");
  var currentID   = $(".button").data("item-id");
  var id          = currentID.substring(0, currentID.indexOf("-"));
      id          = id + "-" + sub_length;
  $(".button")
    .data("item-description",description)
    .data("item-price",total)
    .data("item-id",id);
  console.log("Description: "+$(".button").data("item-description"));
  console.log("Total: "+$(".button").data("item-price"));
  console.log("ID: "+$(".button").data("item-id"));
  $(".price b").html(price);
});
</script>

Поэтому, когда вы меняете переключатели, data-item-price на .button обновляется, и когда вы нажимаете на кнопку, это значение затем добавляется в корзину (как работает Snipcart).

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

В настоящее время три цены подписки устанавливаются на стороне сервера перед доставкой в ​​шаблон. Теперь эти три цены могут быть изменены на основе значения раскрывающегося списка ниже.

Я подумал, что мне нужно сделать что-то снова с атрибутами данных:

<select name="options" id="options">
<option value="">Please choose…</option>
<option 
  value="Option 1" 
  data-price_3="35" 
  data-price_6="33" 
  data-price_12="31">Option 1</option>
<option 
  value="Option 2" 
  data-price_3="25" 
  data-price_6="23" 
  data-price_12="21">Option 2</option>
</select>

но я не совсем уверен в том, как лучше всего сочетать то, что у меня уже есть, с новым элементом select.

Могу ли я иметь один элемент изменить атрибуты данных другого и иметь скрипт для прослушивания обновлений без вывода сообщений, а также on.change/input?