JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<fieldset class="variations">
    <div> <span class="select_label">Colour</span>

        <select id="colour-33" name="tax_colour-33">
            <option value="">Choose an option …</option>
            <option value="100">White/High Gloss Black</option>
        </select>
    </div>
    <div>	<span class="select_label">Installation</span>

        <select id="installation-61" name="tax_installation-61">
            <option value="">Choose an option …</option>
            <option value="200">Delivery only</option>
            <option value="300">Installation required</option>
        </select>
    </div>
</fieldset>
<!-- Initial state of single_variation is as follows. This changes as options are chosen and works well. <div class="single_variation" style="display: none;"></div>
-->
<!-- this version of single_variation only displays if all options are chosen -->
<div class="single_variation" style="display: block;"><span>£</span><span class="price">579.00</span>

    <p class="stock ">In Stock</p>
</div>
<div class="boxthis" style="width: 100%; border: 1px solid black;">	<span id="disctext">
    <p>You need to choose some options first so that we can calculate your price.</p>
    </span>

</div>

JavaScript

$(document).ready(function () {
    var price = parseFloat($(".price").text())
    var val1;
    var val2;
    $("#colour-33").change(function () {
        if (parseFloat($("#colour-33 option:selected").val())) {
            val1 = parseFloat($("#colour-33 option:selected").val());
            price = price + val1;
            $(".price").text(price);
        } else {
            price = price - val1;
            $(".price").text(price);
        }
    });

    $("#installation-61").change(function () {
        if (parseFloat($("#installation-61 option:selected").val())) {
            val2 = parseFloat($("#installation-61 option:selected").val());
            price = price + val2;
            $(".price").text(price);
        } else {
            price = price - val2;
            $(".price").text(price);
        }
    });
});