JSFiddle - React, Tailwind, and code Playground

by docluv

HTML

<select id="product-select">
    <option>Black</option>
    <option>Lime</option>
    <option>Navy</option>
    <option>Blue</option>
</select>
<select id="product-select2">
    <option>Black</option>
    <option>Lime</option>
    <option>Navy</option>
    <option>Blue</option>
</select>
<!--I have multiple section forms each with different ID.. // I want to print on page 60$, but when user selects any of the 2 option forms the price will get +5$ for each. -->
<p>Total Price $ <span class="total-price" </span>

</p>

JavaScript

var totalprice = document.querySelector(".total-price"),
    pricetotal = 60,
    prod1 = document.getElementById("product-select"),
    prod2 = document.getElementById("product-select2");


function calcPrice() {

    setText(totalprice, ++pricetotal);

}

function setText(e, s) {

    if (e.innerText) {
        e.innerText = s;
    } else if (e.textContent) {
        e.textContent = s;
    }

}

setText(totalprice, pricetotal);

prod1.addEventListener("change", calcPrice, false);
prod2.addEventListener("change", calcPrice, false);