How can I use jQuery to get a total from multiple drop down boxes?

Question

I have a dynamic number of dropdown boxes with different values. I wan't to be able to calculate all of the totals from all of the boxes together.

Currently, I have a snippet that will calculate the total of one box, but when I select another box, it will show the total of that one instead. My program can have any amount of drop down boxes but it's random. Heres a snippet that calculates one box at a time

$('.drop').on('change',function() {
    var val = $(this).val();
    var price = $(this).attr('data-cost-per-unit')
    var total = price * val
    $("div.total-amount").text("$"+total);
  });

My form rendered looks like this

         <form accept-charset="UTF-8" action="/orders" id="payment-form" method="post"><div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="ia3sQyXOn0BP3GUDHmLmghjLFyK/27F8N9EEyhYN8UI=" /></div>
                    <li class='bullet-item'>
                      <div class='product panel'>
                        <div class='small-12'>
                          <h4>
                            <li class="product" id="product_2" value="2"><div class='row'>
                              <div class='small-2 columns switch'>
                                <input id='switchName0' type='checkbox'>
                                <label for='switchName0'></label>
                              </div>
                              <div class='small-7 columns'>
                                <input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="2" />
                                another
                                <br>
                                <div class='subheader'>$5.55</div>
                              </div>
                              <div class='small-3 columns'>
                                <select class="drop" data-cost-per-unit="555" id="another" name="order_products[][quanity]" prodindex="0"><option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option></select>
                              </div>
                            </div>
                            </li>  
                          </h4>
                        </div>
                      </div>
                    </li>
                    <li class='bullet-item'>
                      <div class='product panel'>
                        <div class='small-12'>
                          <h4>
                            <li class="product" id="product_1" value="1"><div class='row'>
                              <div class='small-2 columns switch'>
                                <input id='switchName1' type='checkbox'>
                                <label for='switchName1'></label>
                              </div>
                              <div class='small-7 columns'>
                                <input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="1" />
                                test
                                <br>
                                <div class='subheader'>$0.33</div>
                              </div>
                              <div class='small-3 columns'>
                                <select class="drop" data-cost-per-unit="33" id="test" name="order_products[][quanity]" prodindex="1"><option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option></select>
                              </div>
                            </div>
                            </li>  
                          </h4>
                        </div>
                      </div>
                    </li>

Can a jQuery expert help me out here?

Answer 1

//cache your selectors
var drop = $('.drop');
//your grand total variable
var grandtotal = 0;
//create a function to call to reuse for all drops
function getTotal(){
    //cycle through each one
    drop.each(function(i,el){
        //i is the number and el is the element (or this)
        var val = $(this).val();
        var price = $(this).attr('data-cost-per-unit')
        var total = price * val
        grandtotal = grandtotal + total;
    });
    $("div.total-amount").text("$"+grandtotal);
}
//bind on change to all drops
drop.on('change',getTotal);