JSFiddle - React, Tailwind, and code Playground

HTML

<select id="select1">
   <optgroup label="Сок">
    <option value="c1" data-price="200">Апельсиновый</option>
    <option value="c2" data-price="100">Лимонный</option>
    <option value="c3" data-price="300">Персиковый</option>
   </optgroup>
   <optgroup label="Вино">
    <option value="s1" data-price="500">Красное</option>
    <option value="s2" data-price="600">Белое</option>
    <option value="s3" data-price="700">Зеленое</option>
   </optgroup>
   </select>
   
   <select id="select2">
    <option value="s1" data-price="1">Премиум</option>
    <option value="s2" data-price="2">Лайт</option>
    <option value="s3" data-price="3">Экстра</option>  
   </select>

   Стоимость: <input type="text" id="price">

JavaScript

$(function() {
  $("#select1, #select2").change(function() {
    var price = 0;
    $( "select option:selected" ).each(function() {
       price += $(this).data('price');
    });
    $('#price').val(price);
  });

});