jquery - Loop each then display val -

in code there 3 boxes , each 1 grabs data html , uses them small sum fine. problem having getting loop.

what want loop each section below jquery , output correct value. right doing sort of bundling together.

then once it's complete take value each .this-total , add them total value in #total

it works fine 1 when try create loop fails.

i not looking javascript alternative or change html i'm experimenting jquery , appreciated.

var ded = 841;  var grid = 196;  var sum = parsefloat($('#mixers .mix-value').text()) / ded;  var percent = parsefloat($('#mixers .amount').text()) / 100;      $('#mixers .this-total').each(function(index) {    $(this).val('£' + ((grid * percent) * sum).tofixed(2));  });    var total = parsefloat($('#mixers .this-total').val());    $('#total').each(function(index) {      $(this).val( total );  });

form {    margin: 0 auto;    display: block;    text-align: center;  }  form input {    padding: 15px;    display: inline-block;    font-weight: bold;    text-align: center;  }  #mixers {    text-align: center;    border-bottom: 1px solid gray;    margin-bottom: 15px;    padding-bottom: 10px;  }  section {    padding: 5px 35px;    display: inline-block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>      <div id="mixers">      <section class="infora">      <h2>title a</h2>      <p class="price"><span class="amount">17.95</span>      </p>      <div class="mix-value">70</div>      <form>        <input class="this-total" value="price" readonly>      </form>    </section>      <section class="infora">      <h2>title b</h2>      <p class="price"><span class="amount">11.95</span>      </p>      <div class="mix-value">20</div>      <form>        <input class="this-total" value="price" readonly>      </form>    </section>      <section class="infora">      <h2>title c</h2>      <p class="price"><span class="amount">13.62</span>      </p>      <div class="mix-value">10</div>      <form>        <input class="this-total" value="price" readonly>      </form>    </section>    </div>    <form>    <input id="total" value="price" readonly>  </form>

have @ mate:

var ded = 841; var grid = 196; var grandtotal = 0;  $('#mixers .this-total').each(function (index) {     var percent = parsefloat($(this).closest(".infora").find(".mix-value").text())/ded;     var sum = parsefloat($(this).closest(".infora").find(".amount").text())/100;      var total = ((grid * percent) * sum).tofixed(2);     grandtotal = parsefloat(grandtotal) + parsefloat(total);      $(this).val('£' + total); });  $("#total").val('£' + grandtotal); 

see js fiddle:

https://jsfiddle.net/29ynmu6o/4/

is you're after?