JSFiddle - React, Tailwind, and code Playground

HTML

<label class="checkbox" for="Checkbox1">
    <input value="50" data-weight="0.3" type="checkbox" class="sum" data-toggle="checkbox"> Instagram
</label>
<label class="checkbox">
    <input value="50" data-weight="0.4" type="checkbox" class="sum" data-toggle="checkbox"> Review site monitoring
</label>
<label class="checkbox">
    <input value="30" data-weight="0.2" type="checkbox" class="sum" data-toggle="checkbox"> Google+
</label>
<label class="checkbox">
    <input value="20" data-weight="0.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 = $('.sum'),
    $totalValue = $('#payment-total'),
    $totalWeight = $('#payment-w');

$inputs.change(function() {
    var value = parseFloat(this.value);
    var weight = parseFloat($(this).data('weight'));
    
    $totalValue.text(function(i, text) {
    	return parseFloat(text) + value;
    });
    $totalWeight.text(function(i, text) {
    	return parseFloat(text) + weight;
    });
})