JSFiddle - React, Tailwind, and code Playground

HTML

Colour: <select class="vars" name="size">
        <option>Select an option</option>
        <option data-price="-10.00" value="B">blue +10</option>
        <option data-price="+20.00" value="G">green +20</option>
        <option data-price="+30.00" value="Y">yello +30</option>
</select>
<br>
Size: <select class="vars" name="size">
        <option>Select an option</option>
        <option data-price="-1.00" value="S">Small</option>
        <option data-price="+2.00" value="M">Medium</option>
        <option data-price="+3.00" value="L">Large</option>
</select>
<br>
<span class="item-price">9.99</span>

JavaScript

var price = 20;

$(".vars").change(function() {
        new_price = price + $('option:selected', this).data('price');
        alert(new_price);
});