JSFiddle - React, Tailwind, and code Playground

by Ryan Salmons

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" class="sum" data-toggle="checkbox"> Instagram
						</label>
						<label class="checkbox">
  							<input value="50"  type="checkbox" class="sum" data-toggle="checkbox"> Review site monitoring
						</label>
						<label class="checkbox">
  							<input value="50"  type="checkbox" class="sum" data-toggle="checkbox"> Google+
						</label>
						<label class="checkbox">
  							<input value="50"  type="checkbox" class="sum" data-toggle="checkbox"> LinkedIn
						</label>
						</div>
						<div class="span3">
						<label class="checkbox">
  							<input value="50"  type="checkbox" class="sum" data-toggle="checkbox"> Pinterest
						</label>
						<label class="checkbox">
  							<input value="50"  type="checkbox" class="sum" data-toggle="checkbox"> FourSquare
						</label>
						<label class="checkbox">
  							<input value="50"  type="checkbox" class="sum" data-toggle="checkbox"> Tumblr
						</label>
						<label class="checkbox">
  							<input value="50"  type="checkbox" class="sum" 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

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

 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
            total1.innerHTML = parseFloat(total1.innerHTML) + add
        }
    }