I have a checkbox section that users can select to add features. I need each input's value to add to a sum to be presented in the #payment-total and #payment-rebill section. Essentially, if they select two of the checkboxes, #payment-total and #payment-rebill would = 100. I am able to get the first number to add/change, but having trouble getting #payment-rebill to change as well.

Here is my 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>

My 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

    }

}

Here is my jsfiddle: http://jsfiddle.net/rynslmns/6NJ8e/10/