Apply Thousand Separator (Cleave) plugin to TextBox after Partial Postback in ASP.Net

hi

I have 1 dropdownlist and 2 textboxes on the page below are the codes:

<div id="DDtra">
    <asp:UpdatePanel ID="UpdatePanel3" runat="server">
        <ContentTemplate>
            <asp:DropDownList ID="DropDownList1" runat="server" CssClass="ddtranM" AutoPostBack="true" OnSelectedIndexChanged="ddlTran_OSIC"></asp:DropDownList>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

<asp:UpdatePanel ID="UpdatePanel4" runat="server">
    <ContentTemplate>
        <div id="Div1" runat="server" visible="false">
            <asp:TextBox ID="TextBox1" runat="server" CssClass="txtvadi2" ForeColor="#443f13" onblur="WaterMark(this, event,'تا');" onfocus="WaterMark(this, event,'تا');" Text="تا" onpaste="return false;"></asp:TextBox>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel5" runat="server">
    <ContentTemplate>
        <div id="Div2" runat="server">
            <asp:TextBox ID="TextBox2" runat="server" CssClass="txtvadi2" ForeColor="#443f13" onblur="WaterMark(this, event,'از');" onfocus="WaterMark(this, event,'از');" Text="از" onpaste="return false;"></asp:TextBox>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

and I use cleave.js for thousand separator:

<script type="text/javascript">
    $(function () {
        ApplyWaterMark();
    });


    function ApplyWaterMark() {
        var options = {
            blocks: [3, 3, 3, 3],
            delimiter: ','
        }

        new Cleave($('#TxtPrice2'), options);
        new Cleave($('#TxtPrice1'), options);



        if ($('#TxtPrice1').val() == "0") {
            $('#TxtPrice1').val('از');
        }
        if ($('#TxtPrice2').val() == "0") {
            $('#TxtPrice2').val('تا');
        }
        if ($('#TxtPrice1').val() != 'از') {
            $('#TxtPrice1').val($('#TxtPrice1').val());
        }
        if ($('#TxtPrice2').val() != 'تا') {
            $('#TxtPrice2').val($('#TxtPrice2').val());
        }
    }

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                ApplyWaterMark();
            }
        });
    };
</script>

protected void ddlTran_OSIC(object sender, EventArgs e)
{
    string code = Ddltran.SelectedItem.Text;
    switch (code)
    { 
        case "Sell":
            price1.visible = true;
            break;

        default:

            price2.visible = true;
            break;
    }

}

here as you use

<div id="price1" runat="server" visible="false">

and when users select Item "sell" from textbox it will

price1.visible = true;

problem is here thousand separator doesn't work for

a textbox that I put in:

<div id="price1" runat="server" visible="false">
    <asp:TextBox ID="TxtPrice1" runat="server" CssClass="txtvadi2" ForeColor="#443f13" onblur="WaterMark(this, event,'تا');" onfocus="WaterMark(this, event,'تا');" Text="تا" onpaste="return false;"></asp:TextBox>
</div>

because when I run the page this div visibility is false and when I select Item from textbox it will TRUE.

best regards

Neda