Show number of characters remaining in TextArea inside Update Panel using JavaScript and jQuery in ASP.Net

Hi Team,

Show Number of Characters Remaining in Textbox or Textarea inside updatepanel

when panel refreshed it reset value of label.

Please help me to create the sample in update panel which retain character left value after postback alos.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <asp:ScriptManager ID="Sc1" runat="server">
        </asp:ScriptManager>
        <%--  <script type="text/javascript">
            function LimtCharacters(txtMsg, CharLength, indicator) {
                chars = txtMsg.value.length;
                document.getElementById(indicator).innerHTML = CharLength - chars;
                if (chars > CharLength) {
                    txtMsg.value = txtMsg.value.substring(0, CharLength);
                }
            }
        </script>--%>
        <script type="text/javascript">
            $(function () {
                LimtCharacters();
            });
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_endRequest(function (sender, e) {
                    if (sender._postBackSettings.panelsToUpdate != null) {
                        LimtCharacters();
                    }
                });
            };
            function LimtCharacters(txtMsg, CharLength, indicator) {
                chars = txtMsg.value.length;
                document.getElementById(indicator).innerHTML = CharLength - chars;
                if (chars > CharLength) {
                    txtMsg.value = txtMsg.value.substring(0, CharLength);
                }
            }
        </script>
        <asp:UpdatePanel ID="Up1" runat="server">
            <ContentTemplate>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
                                aria-controls="collapseOne">Header 1 </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <asp:UpdatePanel runat="server">
                                <ContentTemplate>
                                    Content 1
                                    <div style="font-family: Verdana; font-size: 13px">
                                        Number of Characters Left:
                                        <label id="lblcount" style="background-color: #E2EEF1; color: Red; font-weight: bold;">
                                            500</label><br />
                                        <asp:TextBox runat="server" ID="txtIdeaDesc" TextMode="MultiLine" Width="100%" MaxLength="500"
                                            onkeyup="LimtCharacters(this,500,'lblcount');" AutoPostBack="true" data-toggle="tooltip"
                                            data-placement="bottom" title="Enter MAX 500 Characters "></asp:TextBox>
                                    </div>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </div>
                    </div>
                </div>
                <br />
                <br />
                <asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
                <asp:HiddenField ID="PaneName" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <script type="text/javascript">
        $(function () {
            SetTabs();
        });
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    SetTabs();
                }
            });
        };
        function SetTabs() {
            var paneName = $("[id*=PaneName]").val() != "" ? $("[id*=PaneName]").val() : "collapseOne";
            //Remove the previous selected Pane.
            $("#accordion .in").removeClass("in");
            //Set the selected Pane.
            $("#" + paneName).collapse("show");
            //When Pane is clicked, save the ID to the Hidden Field.
            $(".panel-heading a").click(function () {
                $("[id*=PaneName]").val($(this).attr("href").replace("#", ""));
            });
        }
    </script>
</asp:Content>

protected void Page_Load(object sender, EventArgs e)
{
   if (this.IsPostBack)
   {
       PaneName.Value = Request.Form[PaneName.UniqueID];
   }
}