First off there is a typo in your addRow function, you are missing an end quote and semi-colon
function addRow() {
var template = '';
template += '<tr>';
template += '<td><input class="underline-input" type="number" name="item" />';
template += '<td><input class="underline-input amount" type="number" id="amount" name="amount" /></td>';
template += '</tr>';
$("#calculation").append(template);
}
The other problem is that you attach the keyup event to all items with class "amount", however that only attaches to items that exist when the call is made, ie on DOM load, so any "amount" items you add after won't have the event attached. You can use the "on" method to attach events instead which will also work for items you add later.
$(document).ready(function () {
$('#calculation').on("keyup", ".amount", function () {
var sum = 0;
$('.amount').each(function () {
sum += Number($(this).val());
});
$('#total').val(sum);
});
});
function addRow() {
var template = '';
template += '<tr>';
template += '<td><input class="underline-input" type="number" name="item" />';
template += '<td><input class="underline-input amount" type="number" id="amount" name="amount" /></td>';
template += '</tr>';
$("#calculation").append(template);
}