JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

/*This uncheck the checkboxes accorndingly to the name of their class*/
$('.arms, .neck').change(function(){
    var myClass = $(this).attr('class'); 
    $('.'+myClass).not(this).prop('checked', false); 
});
/*This uncheck the checkboxes accorndingly to the name of their class*/

/*this just defines number format, don't check*/
Number.prototype.formatMoney = function(c, d, t){
var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "." : d, t = t == undefined ? "," : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };
/*this just defines number format, don't check*/


var input = document.getElementsByTagName("input");
var total = document.getElementById("total");
var prev;

/*THE REAL THING IS HERE*/
for(i=0;i<input.length;i++){
    input[i].onchange = function(){
if (this.type != 'text'){
      if(this.checked){ /*I think this line could change a little bit*/


$("#total").fadeOut(300);
  $("#total").fadeIn(300);


prev=parseFloat(total.innerHTML.replace(/[^0-9\,]+/g,"")) + parseFloat(this.id);
             total.innerHTML = "$" + prev.formatMoney(0, ',', '.');
        }else{
$("#total").fadeOut(300);
  $("#total").fadeIn(300);

prev=parseFloat(total.innerHTML.replace(/[^0-9\,]+/g,"")) - parseFloat(this.id);
             total.innerHTML = "$" + prev.formatMoney(0, ',', '.');
        }
      }
    }
}
/*THE REAL THING IS HERE*/