Add input value to another value as a total sum
<p>I'm creating a budget app where the user can put in a product and a price. I want it to display the total cost by adding each input value (HTML5 type=number) to the next number that is put in with the next added line. </p>

<p>Snippet:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {

  $('.food').click(function() {
    var $frm = $(this).parent();
    var toAdd = $frm.children(".productInput").val();
    var addPrice = $frm.children(".priceInput").val();
    var addAmount = $frm.children(".amountInput").val();


    var div = $("&lt;div&gt;");
    div.append("&lt;p&gt;" + addAmount + "&lt;/p&gt;", "&lt;p id='product'&gt; " + toAdd + " &lt;/p&gt;", "&lt;p&gt;" + addPrice + "&lt;/p&gt;");

    $frm.parent().children(".messages").append(div);

    $(".totalPrice").text("Total Price" + addAmount * addPrice);

  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="menu"&gt;
  &lt;h3&gt;Shopping list&lt;/h3&gt;
  &lt;div class="line"&gt;
    &lt;div&gt;
      &lt;input class='amountInput' type='number' name='quantity' min='0' max='1000' step='1'&gt;
      &lt;input class='productInput' type="text" name="message" value=""&gt;
      &lt;input class='priceInput' type='number' name='quantity' min='0' max='1000000' step='0.01'&gt;
      &lt;button class="food"&gt;Add&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="messages"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="totalPrice"&gt;</code></pre>
</div>
</div>
</p>

<p>How can I do this? :)</p>

<p>Thanks </p>