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);
});