I want to calculate each row's total price by multiplying individual row's inputs and then finally calculate a grand total by adding all the total values of the Total column using JQuery. I am only getting the first row to display total when I enter values. Any help will be greatly appreciated.

     <script type=text/C# src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>

    <script type=text/javascript>

         $(document).ready(function () {

            $(.txtMult).each(function () {

                $(this).keyup(function () {

                    multInputs();

                });

            });

           });



           function multInputs() {

               var mult = 0;

               $(.txtMult).each(function () {

                   var $val1 = $('#val1').val();

                   var $val2 = $('#val2').val();

                   var $total = ($val1 * 1) * ($val2 * 1)

                   $('#multTotal').text($total);

               });

           }



    </script>

    @using (@Html.BeginForm())

    {

        <table>

        <tr>

            <th>

                Quanity

            </th>

            <th>

                Unit Price

            </th>

            <th>

                Total

            </th>

        </tr>

        @for (int i=0; i < 5; i++)

        {



            <tr>

                <td>

                    <input class =txtMult name=txtEmmail id=val1  />

                </td>

                <td>

                    <input class =txtMult name=txtEmmail id=val2/>

                </td>

                <td>

                    <span id=multTotal>0.00</span>

                </td>

            </tr>



    }

<tr>

    <td colspan=3 align=right>

        Grand Total# <span id=grandTotal>0.00</span>

    </td>

</tr>

    </table> 

    }