JSFiddle - React, Tailwind, and code Playground

HTML

<label class="checkbox" for="Checkbox1">
  						<input value="50" type="checkbox" class="sum" data-toggle="checkbox"> Instagram
						</label>
						<label class="checkbox">
  							<input value="50" bweight=".4"  type="checkbox" class="sum" data-toggle="checkbox"> Review site monitoring
						</label>
						<label class="checkbox">
  							<input value="30" bweight=".2" type="checkbox" class="sum" data-toggle="checkbox"> Google+
						</label>
						<label class="checkbox">
  							<input value="20" bweight=".6"  type="checkbox" class="sum" data-toggle="checkbox"> LinkedIn
						</label>

    <div class="card-charge-info">
    <span id="payment-total">0</span>
    <span id="payment-w">0</span>
    </div>

JavaScript

var inputs = document.getElementsByClassName('sum'),
        total  = document.getElementById('payment-total');
        totwgt = document.getElementById('payment-w');
		

 for (var i=0; i < inputs.length; i++) {
        inputs[i].onchange = function() {
            var add = this.value * (this.checked ? 1 : -1);
            total.innerHTML = parseFloat(total.innerHTML) + add;
            add = this.getAttribute('bweight') * (this.checked ? 1 : -1);
            totwgt.innerHTML = parseFloat(totwgt.innerHTML) + add;
        }
    }