JSFiddle - React, Tailwind, and code Playground

HTML

<section id="extra-features">
    <label class="header">Extra Features ($50/month): </label><br><br>
            			<div class="span3">
            			<label class="checkbox" for="Checkbox1">
  							<input value="50" type="checkbox" id="Checkbox1" value="option1" data-toggle="checkbox"> Instagram
						</label>
						<label class="checkbox">
  							<input value="50"  type="checkbox" id="Checkbox2" value="option2" data-toggle="checkbox"> Review site monitoring
						</label>
						<label class="checkbox">
  							<input value="50"  type="checkbox" id="Checkbox3" value="option3" data-toggle="checkbox"> Google+
						</label>
						<label class="checkbox">
  							<input value="50"  type="checkbox" id="Checkbox4" value="option4" data-toggle="checkbox"> LinkedIn
						</label>
						</div>
						<div class="span3">
						<label class="checkbox">
  							<input value="50"  type="checkbox" id="Checkbox5" value="option5" data-toggle="checkbox"> Pinterest
						</label>
						<label class="checkbox">
  							<input value="50"  type="checkbox" id="Checkbox6" value="option6" data-toggle="checkbox"> FourSquare
						</label>
						<label class="checkbox">
  							<input value="50"  type="checkbox" id="Checkbox7" value="option7" data-toggle="checkbox"> Tumblr
						</label>
						<label class="checkbox">
  							<input value="50"  type="checkbox" id="Checkbox8" value="option8" data-toggle="checkbox"> Advertising
						</label>
						</div>
            		</section>
                       
<div class="card-charge-info">
          			Your card will be charged $<span id="payment-total">0</span> now, and your subscription will bill $<span id="payment-rebill">0</span> every month thereafter. You can cancel or change plans anytime.
        		</div>

CSS

.card-charge-info {
    margin: 25px 0;
}

JavaScript

function updateTotals() {
    var inputs = document.getElementById('extra-features').getElementsByTagName('input');
        
    var sum = 0;
    for (var i = 0, num = inputs.length; i < num; i++) {
        if (inputs[i].checked) {
            sum += parseInt(inputs[i].getAttribute('value'));
        }
    }
    
    document.getElementById('payment-total').innerHTML = sum;
    document.getElementById('payment-rebill').innerHTML = sum;
}

var section = document.getElementById('extra-features');
var inputs = section.getElementsByTagName('input');

for (var i = 0, num = inputs.length; i < num; i++) {
    inputs[i].addEventListener('change', updateTotals);
}