JSFiddle - React, Tailwind, and code Playground
HTML
Colour: <select class="vars" name="size">
<option data-price="0">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 data-price="0">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 id="item-price">20</span>
JavaScript
var basePrice = 20;
$(".vars").change(function() {
newPrice = basePrice;
$('.vars option:selected').each(function() {
newPrice += $(this).data('price')
});
$('#item-price').html(newPrice);
});