There are several things going wrong with your code. Looking at your fiddle I am not certain you fully understand how a callback function works, as you have added event handlers inside the callback of other event handlers i.e.
$element.on('event', function() {
// this callback function is executed when the event e.g. click happens
};
Your code currently has:
$element1.on('event', function() {
//do something 1
$element2.on('event', function() {
//do something else 2
};
};
This becomes much more obvious when we use code indentation, so if you aren't already then start doing it!
Make sure you review what HTML element classes and id's are for. In short, classes can be re-used on many elements to represent commonality of styling or purpose, whereas an ID is a unique identifier to one element. Your fiddle has several elements with the same id, but unique classes.
I have made a minimalistic working example for you to demonstrate one approach to this problem.
HTML:
<div>
<span>Bone Burger</span>
<p>28€</p>
<input type="number" id="quantity1" data-price='28' placeholder="#" />
<input type="number" id="total1" placeholder="total" disabled />
</div>
<div>
<span>Smoke Burger</span>
<p>29€</p>
<input type="number" data-price='29' id="quantity2" placeholder="#" />
<input type="number" id="total2" placeholder="total" disabled />
</div>
<p>Sub total: €<span id='subtotal'>0</span></p>
JS:
$(document).ready(function(){
$('#quantity1').on('change keyup', function() {
$this = $(this);
var price1 = $this.data('price');
var quantity1 = $this.val();
var amount1 = price1 * quantity1;
$('#total1').val(amount1);
updateTotal();
});
$('#quantity2').on('change keyup', function() {
$this = $(this);
$('#total2').val($this.data('price') * $this.val());
updateTotal();
});
});
function updateTotal() {
var subTotal = Number($('#total1').val()) + Number($('#total2').val());
$('#subtotal').html(subTotal);
}
There is a jsFiddle here
I have made some small modifications to your HTML, mainly cutting out things which aren't pertinent to this example.
I have moved the data-price onto a different element, firstly for ease of use, and secondly because it makes little sense to me to have it on the enclosing div.
I have also added an input with a total for each item. If you want to this can be hidden from the end user by adding the "hidden" attribute.
I have also added some id attributes that will help us out a bit more.
The javascript is relatively simple. The document.ready function is only used to add our event listeners, one for each input. I have used the change event in addition to keyup, because number inputs can also be changed with the little arrows next to the input. We then get the price from the data-attribute, the quantity from the element itself, and apply it to the relevant total input.
I have added a more succinct version of the same thing for the quantity2 handler.
We have also defined an updateTotal method outside of the document.ready function. This just adds the totals together, and places the result in the subtotal element. We call this updateTotal method from within our event handlers, so any time the user changes something, the overall total is updated as well.
Any questions ask away.