如何通过javascript dynamicaly添加多个字段的结果？

Question

我有一个脚本：

input

我添加按钮新行以获得更多服务，价格，数量和折扣。

我想在页面实时结束时显示总价格的总和。

类似的东西：

ngModel

然后汇总数组：

$(document).ready(function(){
    $("#addCF").click(function(){
        $("#customFields").append('<tr valign="top" class="container-fluid"><td class="col-sm-6"><input class="col-sm-6" type="text" id="service" name="service[]"></td><td class="col-sm-1"><input class="code" type="text" id="qty" name="qty[]" value=""></td><td class="col-sm-1"><input class="code" type="text" id="price" name="price[]" value=""></td><td class="col-sm-1"><input class="code" type="text" id="discount" name="discount[]" value="" ></td><td class="col-sm-1"><a href="javascript:void(0);" class="remCF"><input class="btn-default" type="button" id="del" name="del" value="Delete"></a></td></tr>');
    });
    $("#customFields").on('click', '.remCF', function(){
        $(this).parent().parent().remove();
    });
});

在添加的字段中键入一些价格时，实时制作所有这些内容非常重要。