JSFiddle - React, Tailwind, and code Playground

by Jake Wolpert

HTML

<form id="form1" method="post" action="">
    <p>
        <select name="CPU" id="CPU">
            <option value="0" selected>Select CPU</option>
            <option value="246">Intel Core i5 4440 3.1GHz (3.3GHz Turbo) Quad Core</option>
            <option value="268.80">Intel Core i5 4570 3.2GHz (3.6GHz Turbo) Quad Core CPU</option>
            <option value="282">Intel Core i5 4570S 2.9GHz (3.6GHz Turbo) Quad Core CPU</option>
            <option value="294">Intel Core i5 4670 3.4GHz (3.8GHz Turbo) Quad Core CPU</option>
            <option value="414">Intel Core i7 4770 3.4GHz (3.9GHz Turbo) Quad Core CPU</option>
        </select>
    </p>
    <p>
        <select name="GPU" id="GPU">
            <option value="0">Select Graphics Card</option>
            <option value="1498.80">EVGA GeForce GTX Titan 6GB Superclocked</option>
            <option value="958.80">Gigabyte GeForce GTX 780 Ti 3GB</option>
            <option value="754.80">Gigabyte GeForce GTX 780 OC 3GB</option>
            <option value="502.80">EVGA GeForce GTX 770 Superclocked 2GB</option>
            <option value="378">EVGA GeForce GTX 760 ACX 2GB</option>
            <option value="262.80">Gigabyte GeForce GTX 660 OC 2GB</option>
            <option value="250.80">EVGA GeForce GTX 650 Ti Boost 2GB Superclocked</option>
            <option value="154.80">EVGA GeForce GTX 650 1GB</option>
            <option value="130.80">ASUS GeForce GT 640 2GB</option>
            <option value="814.80">XFX Radeon R9 290X 4GB</option>
            <option value="598.80">XFX Radeon R9 290 4GB</option>
        </select>
    </p>
    <p>
        <select name="HDD" id="HDD">
            <option value="0">Select HDD
                <option value="70.80">500gb</option>
                <option value="82.80">1TB</option>
                <option value="118.80">2TB</option>
                <option value="130.80">1TB SSHD</option>
                <option value="166.80">3TB</option>
                <option...

JavaScript

$(function () {
    var fields = $('#form1 :input').change(calculate);

    function calculate() {
        var price = 0;
        fields.each(function () {
            price += +$(this).val();
        })
        $('#price').html(price.toFixed(2));
    }
})