calculate sum of the each dynamic totals

Question

I want to calculate sum of all totals in the below js fiddle, using the following code: http://jsfiddle.net/hEByw/7/

For reference i given the screenshot below. The total calculates the according to the qty*price dynamically. I want to add all totals and display as a grand total. Please anyone can help me regarding this. Thanks in advance

<script type='text/javascript'>
    //<![CDATA[
    $(window).load(function () {
        var counter = 1;
        $(document).ready(function () {

            //To multiply two textbox values
            $('#qty' + counter).keyup(calculate);
            $(this).keyup(calculate);

            function calculate(e) {
                $('#total' + e.target.title).val($('#qty' + e.target.title).val() * $('#rates' + e.target.title).val());
            }
            $('#btnCalc').click(function () {
                alert($('#qty').val());
            });
            $("#addButton").click(function () {
                if (counter > 27) {
                    alert("Only 27 textboxes allow");
                    return false;
                }
                var newTextBoxDiv = $(document.createElement('div'))
                    .attr("id", 'TextBoxDiv' + counter);
                newTextBoxDiv.after().html('<label>Product #' + counter + ' : </label>' +
                    '<input type="text" size="60" name="product[]" placeholder="Product"\n\
    id="product' + counter + '" value="" title = ' + counter + ' >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
    <label>Quantity #' + counter + ' : </label>' +
                    '<input type="text" size="2" title = ' + counter + ' name="qty[]" \n\
    id="qty' + counter + '" value="" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
    <label>Rate #' + counter + ' : </label>' +
                    '<input type="text" title = ' + counter + ' size="2" name="rates[]"\n\
    id="rates' + counter + '" value="" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
    <label>Total #' + counter + ' : </label>' +
                    '<input type="text" title = ' + counter + ' size="3" name="total[]" id="total' + counter + '" value="" class="txt" onchange="calculate();"> ');

                newTextBoxDiv.appendTo("#TextBoxesGroup");
                counter++;
            });

            $("#removeButton").click(function () {
                if (counter == 0) {
                    alert("No more textbox to remove");
                    return false;
                }

                counter--;

                $("#TextBoxDiv" + counter).remove();
            });
        });

    });//]]>

</script>


<table>
    <tr>
        <td><strong>Select the products</strong>
            <input type='button' value='Add Products' id='addButton'>
            <input type='button' value='Remove Products' id='removeButton'>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <div id='TextBoxesGroup'></div>
        </td>
    </tr>
    <tr>
        <td>
            <input type="hidden" id="countervalue" name="countervalue" style="display:none;">
        </td>
    </tr>
</table>

Grand Total : <p id="inputSum"></p>

Answer 1

Check this solution

http://jsfiddle.net/mgc2f5xj/

added a function to get total of all items

function getTotal(){
        var totals = document.getElementsByName("total[]");
      var total = 0;
      for (var i=0; i< totals.length; i++){
            total+= Number(totals[i].value);
      }
      document.getElementById("inputSum").innerText = total;
    }