[Solved] Column Total in ASP.Net GridView is not working using JavaScript in UpdatePanel

Gridview column Debit and credit, total is not working, when i am adding and removing row from GridView.

$(function () {
    CalculateDebitCredittotal()
});
 
function CalculateDebitCredittotal() {
    var creditTotal = 0;
    var debitTotal = 0;
    $("[id*=gvtrans] tr:has(td)").each(function () {
        if ($(this).find($("[id*=txtCredit]")).val() != "" && $(this).find($("[id*=txtCredit]")).val() != undefined) {
            creditTotal += parseFloat($(this).find($("[id*=txtCredit]")).val());
        }
        if ($(this).find($("[id*=txtDebit]")).val() != "" && $(this).find($("[id*=txtDebit]")).val() != undefined) {
            debitTotal += parseFloat($(this).find($("[id*=txtDebit]")).val());
        }
 
        $(this).find($("[id*=lblTotal]")).html("Total:" + debitTotal.toString());
        $(this).find($("[id*=lblTotalcr]")).html("Total:" + creditTotal.toString());
    });
 
    $("[id*=hfCredit]").val(creditTotal);
    $("[id*=hfDebit]").val(debitTotal);
}

<asp:GridView ID="gvtrans" runat="server" AllowSorting="True" AutoGenerateColumns="False"  BackColor="#99ccff" HeaderStyle-ForeColor="#ccffff" 
    OnRowDataBound="gvtrans_RowDataBound" OnRowDeleting="gvtrans_RowDeleting" ShowFooter="True" ShowHeaderWhenEmpty="True" CssClass="table table-responsive">
     <Columns>
         <asp:BoundField DataField="RowNumber" HeaderText="S.NO"  />
         <asp:TemplateField HeaderText="Code" >
             <ItemTemplate>
                 <asp:TextBox ID="txtcode" runat="server"></asp:TextBox>
             </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Head" >
             <ItemTemplate>
                 <asp:Label ID="lbfourdr" runat="server" Visible="false" />
                 <asp:DropDownList ID="ddlfourdr" runat="server" AutoPostBack="true" CssClass="form-control js-example-placeholder-single" Height="85px" OnSelectedIndexChanged="ddlfourdr_SelectedIndexChanged" ToolTip="Select " Width="300px">
                 </asp:DropDownList>
             </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Debit">
             <ItemTemplate>
                 <asp:TextBox ID="txtDebit" runat="server"></asp:TextBox>
             </ItemTemplate>
             <FooterTemplate>
                 <asp:Label ID="lblTotal" runat="server"></asp:Label>
             </FooterTemplate>
         </asp:TemplateField>
        
 
           <asp:TemplateField HeaderText="Credit">
             <ItemTemplate>
                 <asp:TextBox ID="txtCredit" runat="server"  ></asp:TextBox>
             </ItemTemplate>
             <FooterTemplate>
                 <asp:Label ID="lblTotalcr" runat="server"></asp:Label>
             </FooterTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Remarks" >
             <ItemTemplate>
                 <asp:TextBox ID="txtremarks" runat="server"></asp:TextBox>
             </ItemTemplate>
         </asp:TemplateField>
      
         <asp:CommandField ButtonType="Button" ControlStyle-ForeColor="Red" ShowDeleteButton="True" />
     </Columns>                 
</asp:GridView>