Q:

jQuery - count price from multiple dropdowns

I have a problem, and still don't know how to figure it out. 
I have a few dropdowns with price at the left side and next to each of them quantity. 
For example - left dropdown is like a size of photo and right is quantity. 
I can't figure out how to count each pair of dropdowns and count a total price, only last pair creates total price, despite others.
function countPrice(){
    var total_price = 0.00;
    var data_price = "";
  var data_count = "";

  $(".tp-sel > option:selected").each(function(){
    data_price = parseFloat($(this).data("price")) || 0;
  });

  $(".tp-sel-count > option:selected").each(function(){
        data_count = parseFloat($(this).data("count")) || 0;
  });

  total_price = data_price * data_count;
  $("#price").html(total_price.toFixed(2));
  console.log("Price: " + data_price + "Count:" +data_count);
}

Here's fiddle: JSFiddle
Thank you! 

A:

I'd suggest you iterate over the divs containing the selects, so that you can process each price and count as a pair. I've added a class to those container divs to make the iteration easier:

function countPrice(){
  var total_price = 0.00;
  var data_price = "";
  var data_count = "";

  $(".product").each(function(){
    data_price = parseFloat($(this).find(".tp-sel > option:selected").data("price")) || 0;
    data_count = parseFloat($(this).find(".tp-sel-count > option:selected").data("count")) || 0;
    console.log("Price: " + data_price + "Count:" +data_count);
    total_price += data_price * data_count;
  })
  $("#price").html(total_price.toFixed(2));
}


$("#countprice").click(function(){
  countPrice();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="width: 30%; display:block;" class="product">
  <select class="tp-sel">
    <option data-price="0.10">0.10</option>
    <option data-price="0.30">0.30</option>
    <option data-price="0.40">0.40</option>
  </select>
  <select class="tp-sel-count">
    <option data-count="1">1</option>
    <option data-count="2">2</option>
    <option data-count="3">3</option>
    <option data-count="4">4</option>    
  </select>
</div>
<div style="width: 30%; display:block;" class="product">
  <select class="tp-sel">
    <option data-price="0.10">0.10</option>
    <option data-price="0.30">0.30</option>
    <option data-price="0.40">0.40</option>
  </select>
  <select class="tp-sel-count">
    <option data-count="1">1</option>
    <option data-count="2">2</option>
    <option data-count="3">3</option>
    <option data-count="4">4</option>    
  </select>
</div>

<div style="width: 30%; display:block;" class="product">
  <select class="tp-sel">
    <option data-price="0.10">0.10</option>
    <option data-price="0.30">0.30</option>
    <option data-price="0.40">0.40</option>
  </select>
  <select class="tp-sel-count">
    <option data-count="1">1</option>
    <option data-count="2">2</option>
    <option data-count="3">3</option>
    <option data-count="4">4</option>    
  </select>
</div>
<div>
<span id="price">0.00</span>
<button id="countprice">
Count
</button>
</div>

