JSFiddle - React, Tailwind, and code Playground

by heliosh

HTML

<table>
    <tr>
        <td>Persons?</td>
        <td>
            <input class="span4 input-big" id="dare_price1" name="Persons" value="" size="30" type="text" />
        </td>
    </tr>
    <tr>
        <td>Animals?</td>
        <td>
            <input class="span4 input-big" id="dare_price2" name="Animals" value="" size="30" type="text" />
        </td>
    </tr>
    <tr>
        <td>Bedlinen?</td>
        <td>
            <input class="span4 input-big" id="dare_price3" name="Bedlinen" value="" size="30" type="text" />
        </td>
    </tr>
    <tr>
        <td>Towels?</td>
        <td>
            <input class="span4 input-big" id="dare_price4" name="Towels" value="" size="30" type="text" />
        </td>
    </tr>
</table>
<table style="width: 50%">
    <tr>
        <td style="width: 403px"></td>
        <td></td>
    </tr>
    <tr>
        <td style="width: 403px">Rentalprice</td>
        <td>189.00</td>
        <td>Euro</td>
    </tr>
    <tr>
        <td style="width: 403px">Taxes</td>
        <td style="width: 50px">
            <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount1" readonly="readonly" name="PricePersons" value="" />
        </td>
        <td>Euro</td>
    </tr>
    <tr>
        <td style="width: 403px"><span lang="nl">Animals</span>
        </td>
        <td>
            <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount2" readonly="readonly" name="PriceAnimals" value="" />
        </td>
        <td>Euro</td>
    </tr>
    <tr>
        <td style="width: 403px"><span lang="nl">Bedlinen</span>
        </td>
        <td>
            <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount3" readonly="readonly" name="PriceBedlinen" value="" />
        </td>
        <td>Euro</td>
    </tr>
    <tr>
        <td style="width: 403px"><span lang="nl">Towels</span>
        </td>
        <td>
            <input style="border: 0px;" class="style11 span4...

JavaScript

$(document).ready(function () {
    function updateArticle1() {
        var Persons = parseFloat($("#dare_price1").val());
        var total = (Persons) * 2.00;
        var total = total.toFixed(2);
        if (isNaN(total)) total = 0;
        $("#total_price_amount1").val(total);
    }


    function updateArticle2() {
        var Animals = parseFloat($("#dare_price2").val());
        var total = (Animals) * 3.50;
        var total = total.toFixed(2);
        if (isNaN(total)) total = 0;
        $("#total_price_amount2").val(total);
    }


    function updateArticle3() {
        var Bedlinen = parseFloat($("#dare_price3").val());
        var total = (Bedlinen) * 8.50;
        var total = total.toFixed(2);
        if (isNaN(total)) total = 0;
        $("#total_price_amount3").val(total);
    }


    function updateArticle4() {
        var Towels = parseFloat($("#dare_price4").val());
        var total = (Towels) * 7.50;
        var total = total.toFixed(2);
        if (isNaN(total)) total = 0;
        $("#total_price_amount4").val(total);
    }


    function updateTotal() {
        var price1 = parseFloat($("#total_price_amount1").val());
        var price2 = parseFloat($("#total_price_amount2").val());
        var price3 = parseFloat($("#total_price_amount3").val());
        var price4 = parseFloat($("#total_price_amount4").val());
        var total = price1 + price2 + price3 + price4+;
        if (isNaN(total)) total = 0;
        $("#totalSum").text(total);
    }

    $(document).on("change, keyup", "#dare_price1", updateArticle1);
    $(document).on("change, keyup", "#dare_price2", updateArticle2);
    $(document).on("change, keyup", "#dare_price3", updateArticle3);
    $(document).on("change, keyup", "#dare_price4", updateArticle4);
  //  $(document).on("change, keyup", "#getTotal", updateTotal);
    $(document).on("click", "#getTotal", updateTotal);        
});