Suma de inputs dinamicos

[LABANDADELOSO]

HOLA A TODOS,

Me encuentro realizando un formulario de ingreso de productos, con inputs agregados dinamicamente con la siguiente funcion, la cual funciona sin ningun problema, pero ademas de eso, necesito mostrar en la vista en tiempo real, el resultado entre precio y cantidad de cada producto.
Alguna idea de como realizarlo?

Saludos.

Código:

$(document).ready(function() {
    $("#add").click(function() {
        var intId = $("#buildyourform div").length + 1;
        var fieldWrapper = $("<div class=\"products\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"data[Product]["+ intId +"][nombre]\" class=\"form-control\" placeholder=\"Detalle del producto\" style=\"width:30%;\" />");
        var fType = $("<input type=\"text\" name=\"data[Product]["+ intId +"][cantidad]\" class=\"form-control\" placeholder=\"Cantidad\" style=\"width:20%;\" />");
        var fType2 = $("<input type=\"text\" name=\"data[Product]["+ intId +"][precio]\" class=\"form-control\" placeholder=\"Valor\" style=\"width:20%;\" />");
        var removeButton = $("<input type=\"button\" class=\"btn btn-danger btn-fill\" style=\"width:15%;\" value=\"Eliminar\" />");

        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(fType);
        fieldWrapper.append(fType2);
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
    $("#preview").click(function() {
        $("#yourform").remove();
        var fieldSet = $("<fieldset id=\"yourform\"><legend>Your Form</legend></fieldset>");
        $("#buildyourform div").each(function() {
            var id = "input" + $(this).attr("id").replace("field","");
            var label = $("<label for=\"" + id + "\">" + $(this).find("input.fieldname").first().val() + "</label>");
            var input;
            switch ($(this).find("select.fieldtype").first().val()) {
                case "checkbox":
                    input = $("<input type=\"checkbox\" id=\"" + id + "\" name=\"" + id + "\" />");
                    break;
                case "textbox":
                    input = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\" />");
                    break;
                case "textarea":
                    input = $("<textarea id=\"" + id + "\" name=\"" + id + "\" ></textarea>");
                    break;    
            }
            fieldSet.append(label);
            fieldSet.append(input);
        });
        $("body").append(fieldSet);
    });
});

Código HTML:

<div class="products">
                                                <input type="text" name="data[Product][0][nombre]" class="form-control" placeholder="Detalle del producto" style="width:30%;" />
                                                <input type="text" id="cantidad" name="data[Product][0][cantidad]" class="form-control" placeholder="Cantidad" style="width:20%;" />
                                                <input type="text" id="precio" name="data[Product][0][precio]" class="form-control" placeholder="Valor" style="width:20%;" />
                                                <input type="button" value="Agregar" class="btn btn-info btn-fill" id="add" />
</div>