JSFiddle - React, Tailwind, and code Playground

by MarkSchultheiss

HTML

<input type="checkbox" name="accs" icost="50" class="arms" />Arm 1: $50
<br/>
<input type="checkbox" name="accs" icost="60" class="arms" />Arm 2: $60
<br/>
<input type="checkbox" name="accs" icost="70" class="neck" />Neck 1: $70
<br/>
<input type="checkbox" name="accs" icost="80" class="neck" />Neck 2: $80
<br/>
<div id="total">$500</div>

JavaScript

var items = $('input.arms[type="checkbox"], input.neck[type="checkbox"]');
items.change(function () {
    var myClass = $(this).attr('class');
    $('.' + myClass).not(this).prop('checked', false);
    var total = $('#total');
    var totalcost = 0;
    total.fadeOut(300);
    items.filter(':checked').each(function (i) {
        var cost = $(this).attr('icost');
        totalcost = totalcost + parseFloat(cost);
    });
    total.text("$" + totalcost + ".00"); // fix your format here as needed
    total.fadeIn(300);
});