jQuery - sum array value

jQuery - sum array value http://stackoverflow.com/questions/33210423/adding-multiple-array-values/33210509?noredirect=1#comment54225823_33210509

by Norlihazmey Ghazali

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<form method="post" action="collect_vals.php">
    <div id="input_fields">
        <div>
            <input type="text" placeholder="unit" name="unit[]" class="a">
            <input type="text" placeholder="price" name="price[]" class="a">
            <input type="text" placeholder="total" name="total[]" class="total"> <span class="fa fa-plus-circle" id="add_field"></span>
        </div>
    </div>
    <input type="submit" value="submit">
</form>

CSS

#add_field {
    cursor: pointer;
}
#add_field:hover {
    color: green;
}
#remove {
    cursor:pointer;
}
#remove:hover {
    color:red;
}
input {
    margin-bottom:2px;
}

JavaScript

$(document).ready(function () {
    $("#add_field").click(function (e) {
        e.preventDefault();
        $("#input_fields").append('<div><input type="text" placeholder="unit" name="unit[]" class="a"> <input type="text" placeholder="price" name="price[]" class="a"><input type="text" placeholder="total" name="total[]" class="total">  <span id="remove" class="fa fa-minus-circle"></span</div>');
    });

    $("#input_fields").on('keyup', '.a', function () {
        var all = $(this).siblings('input.a').addBack();
        var sum = 1;
        all.each(function(i,e){           
            sum *= $(e).val();
        });
        $(this).nextAll('.total').val(sum);
    });

    $("#input_fields").on("click", "#remove", function (e) {
        e.preventDefault();
        $(this).parent('div').remove();
    })
});