JSFiddle - React, Tailwind, and code Playground
HTML
<div class="input">
Text 1
<input type="text" name="1" size="5" maxlength="2" class="quote-input" data-price="9.95" data-name="Text 1">
Checkbox 1
<input type="checkbox" name="special_1" value="1" id="1" class="checkbox-hidden special-input" data-price="19.90" data-name="Checkbox 1">
Checkbox 2
<input type="checkbox" name="special_1" value="2" id="2" class="checkbox-hidden special-input" data-price="45.95" data-name="Checkbox 2">
Checkbox 3
<input type="checkbox" name="special_1" value="3" id="3" class="checkbox-hidden special-input" data-price="69.95" data-name="Checkbox 3">
Text 2
<input type="text" name="2" size="5" maxlength="2" class="quote-input" data-price="7.50" data-name="Text 2">
Text 3
<input type="text" name="10" size="5" maxlength="2" class="quote-input" data-price="17.95" data-name="Text 3">
Text 4
<input type="text" name="11" size="5" maxlength="2" class="quote-input" data-price="19.95" data-name="Text 4">
</div>
<div class="quote">
<div class="quote-header">
Quote
</div>
<div id="quote-summary"></div>
<div class="quote-total">
<span>total</span>
<span class="quote-sum" id="quoteTotal">0.00</span>
</div>
</div>
JavaScript
$(document).ready(function() {
$("input.quote-input").each(function() {
$(this).keyup(function() {
calculateSum();
});
});
$(".special-input").click(function() {
calculateSum();
});
});
function calculateSum() {
var summary = [];
var sum = 0;
$("input.quote-input, .special-input:checked").each(function() {
if ($(this).prop('checked') || (!isNaN(this.value) && this.value.length !== 0)) {
var multiplier = $(this).prop('checked') ? 1 : parseFloat(this.value);
var price = parseFloat($(this).data('price')) * multiplier;
var name = $(this).data('name');
sum += price;
summary.push(name + '\t$' + price.toFixed(2));
}
});
$("#quoteTotal").html(sum.toFixed(2));
$('#quote-summary').html(summary.join('<br>'));
}