JSFiddle - React, Tailwind, and code Playground

by justamir

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="price">Estimate Price $<label for="amount1" class="total">0</label></div>

<p class="itemdesc1">How many "Linear Feet" of boards do you have?</p>
<input id="amount1" class="amount" data-for="amount1" />

<div class="addon"><input id="amount2" type="checkbox" value="10.00" class="radio addOn add" data-for="amount1" />Add Red $10.00</div>

<div class="addon"><input id="amount3" type="checkbox" value="20.00" class="radio addOn percentage" data-for="amount1" />Add Blue + 20%</div>

JavaScript

$('.amount').keydown(function () {
    $('.price label').text('0');
});

$('.amount').keyup(function () {
    changeAmount();
});

$('input:checkbox').change(function () {
    changeAmount();
});

function changeAmount() {
    var $amount = 0;

    $amount = parseFloat( $('.amount').val() ) * 20;
    if (isNaN($amount)) {
        $amount = 0;
    }

    var $add = 0;
    $('.add:checked').each(function () {
        $add += parseFloat( $(this).val() );
    });

    // Calculate percentage of the Base product
    if ( $('.percentage').is(":checked") ) {
        $amount = $amount * (1 + $('.percentage').val()/100 );
    }

    var $total = parseFloat( $amount + $add );

    $('.price label').text( $total.toFixed(0) )
}