Sum Values of Dynamic Content

Question

Given that I have 5 input fields that are linked to their own price, I want to be able to grab the value of the input multiplied by its specific price and return that value to the dom.

This is what's being rendered, there are 5 with a unique price. I'm not sure how to link each input to its specific price, add the prices of all 5 inputs (if there are any) and post them on the dom.

I'm trying to get the data-price of the .class p tag, loop through them, link it to their input add the sum and post the sum to the dom

<section data-itemid="${menuObj.id}">
  <div class="amount">
    <input type="number" placeholder="Quantity" min="0" name="${menuObj.id}">
  </div>
  <div class="item">
    <h1>${menuObj.name}</h1>
    <p class="food">${menuObj.description}</p>
    <p class="price" data-price="${menuObj.price}">${menuObj.price}</p>
  </div>
</section>

I have it working for one, but not sure how to get them working for all

$(function() {
  $('input').on('keyup', function() {
    var input = $('.amount input').val();
    var price = $('.price').data('price');
    var final = $('.finalprice p');
    var total = input * price;
    final.text(total);
  });
})

Answer 1

For dynamic content use event delegation to bind events.

$(document).on('input', '.menu-class div[class="amount"] input[type="number"]', function() {...}

Use input event to cover every change on your input Quantity.

Apply a class to the section. i.e: .menu-class

Approach

Basically, loop over the section and collect the amount.

var total = 0;
$('.menu-class').each(function() {
  var $section = $(this);
  var input = $section.find('div.amount [type="number"]').val();
  var price = $section.find('.price').data('price');

  total += (input * price);      
});

$finalPrice.text(total);

Snippet

$(function() {
  var $finalPrice = $('.finalprice p');
  $finalPrice.on('calculate', function() {
    var total = 0;
    $('.menu-class').each(function() {
      var $section = $(this);
      var input = $section.find('div.amount [type="number"]').val();
      var price = $section.find('.price').data('price');

      total += (input * price);
    });

    $finalPrice.text(total);
  });

  $(document).on('input', '.menu-class div[class="amount"] input[type="number"]', function() {
    $finalPrice.trigger('calculate');
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class='col-md-6 col-xs-6'>
  <section class='menu-class' data-itemid="111">
    <div class="amount">
      <input type="number" placeholder="Quantity" min="0" name="quant_111">
    </div>
    <div class="item">
      <h1>My Meat :-)</h1>
      <p class="food">Meat</p>
      <p class="price" data-price="1000.0">1,000.00</p>
    </div>
  </section>
  <hr>
  <section class='menu-class' data-itemid="112">
    <div class="amount">
      <input type="number" placeholder="Quantity" min="0" name="quant_112">
    </div>
    <div class="item">
      <h1>My bread :-)</h1>
      <p class="food">Bread</p>
      <p class="price" data-price="2000.0">2,000.00</p>
    </div>
  </section>
</section>
<section class='col-md-6 col-xs-6'>
  <section class='finalprice'>
    <h1>Final price</h1>
    <p>
    </p>
  </section>
</section>

Answer 2

$('.amount input') returns an array-like object of all dom elements that match the selector. I believe $('.amount input').val(); will return value from the first item in the array

You may want to localize finding inputs, like below:

$(function() {
    $('input').on('keyup', function() {
        var $section = $(this).closest('section');
        var input = $section.find('.amount input').val();
        var price = $section.find('.price').data('price');
        var final = $section.find('.finalprice p');
        var total = input * price;
        final.text(total);
    });
});