JQuery function created inside a user control inside a repeater inside an update panel is not working

Question

When I move my user control outside of the repeater and (still inside the update panel) pass its properties manually instead of using repeater, everything works fine. But when I use the repeater to pass properties to my user control, the user control gets loaded from database fine and appears on the final client page which shows those parameters (PID, StID) passes successfully but its jQuery function stops working. So again jQuery works fine outside of the repeater.

Things I tried:

1. Since they say repeater messes up with the unique ID of the elements, I used class instead. This did not work. I also used unique IDs for class and element ID's, which didn't work either. Now I am using unique names for classes inside repeater because my PID is a GUID and I construct unique stuff there for class names.

2. Moved myusercontrol out of repeater. This works.

3. I created another page and I manually give properties to my user control. This works fine.

4. I wrote one similar script to what u see in the post but outside of the repeater to simply hide and show my element inside the user control within the repeater. but that also did not work! I cannot even see the html output of the user control in the final page>view source ( I guess MS uses different mechanism to hide them ) although I see user control on the final page! unless I put the user control outside the repeater or I use chrome dev tool then I can see the html output of user control. I am not sure if it has something to do with this.

MyPage.aspx

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
    <asp:Panel ID="Panel1" runat="server" Height="49px" Style="margin-left: 211px">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSrc1" ViewStateMode="Enabled" EnableViewState="False">
                            <ItemTemplate>
                                <div id='FC<%# Eval("PID")%><%# Eval("SID")%>'>
                                    <UserControl:MView runat="Server" PelID='<%#Eval("PID")%>' StID='<%#Eval("SID") %>' ID="Mview1" ViewStateMode="Enabled" EnableViewState="False" />                            
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>
                        <asp:SqlDataSource ID="SqlDataSrc1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString2 %>" SelectCommand="SELECT PID, SID FROM [fc] LEFT JOIN [pt] ON [pt].ID = [fc].PID WHERE ([pt].[TID] = @TID)">
                            <SelectParameters>
                                <asp:ControlParameter ControlID="TreeView1" Name="TID" PropertyName="SelectedValue" DefaultValue="5AF4D771-9DA9-46B9-8075-200DF8652063" Type="String" />
                            </SelectParameters>
                        </asp:SqlDataSource>  
           </ContentTemplate>    
            </asp:UpdatePanel>           
        </asp:Panel>

User.Ascx

    $(document).ready(function () {
       $("body").on( 'click', "#front<%= PID.ToString()%><%=StID.ToString()%>",function (e) {
           alert('test');
           $("div.divBC<%= PID.ToString()%><%=StID.ToString()%>").hide();
            $("div.divCF<%= PID.ToString()%><%=StID.ToString()%>").show();
           e.preventDefault();
           e.disablePopup();
           return false;

        });

        $("body").on('click', "#back<%= PID.ToString()%><%=StID.ToString()%>", function (e) {
            alert("before Back");
            $("div.divCF<%= PID.ToString()%><%=StID.ToString()%>").hide();
            $("div.divBC<%= PID.ToString()%><%=StID.ToString()%>").css('visibility', 'visible');
            $("div.divBC<%= PID.ToString()%><%=StID.ToString()%>").show();
            e.preventDefault();
            e.disablePopup();
            return false;
        });
    });


</script>
    <table style="width: 100%;">
        <tr>
            <td>
                <asp:Label ID="Lable1" runat="server" Text="--"></asp:Label></td>
            <td>
                <asp:Label ID="Label2" runat="server" Text="--"></asp:Label></td>
            <td>
                <asp:Label ID="Label3" runat="server" Text="--"></asp:Label></td>
        </tr>
        <tr>
            <td colspan="3" >
                <hr style="color: #C0C0C0" />
                <span>
                    Time: 
                    <asp:Literal runat="server" ID="SpecialTime"></asp:Literal>
                    &nbsp;&nbsp;&nbsp;
                    Last Time : [under construction! ]
                    <asp:Literal runat="server" ID="OtherThings"></asp:Literal>
                </span>
                <hr />
                <div class="divCF<%= PID.ToString()%><%=StID.ToString()%>">
                    <hr/>
                    <h3>
                        <span>                            
                            <br />
                            <asp:Literal runat="server" ID="Title"></asp:Literal>
                        </span>
                    </h3>
                </div>
                <div class="divBC<%= PID.ToString()%><%=StID.ToString()%>" style="visibility:hidden">                    
                    <asp:Literal runat="server" ID="TextCnt"></asp:Literal>
                    <input type="hidden" value="<%= PID.ToString() %>" id="PDHolder"/>
                    <input type="hidden" value="<%= StID.ToString() %>" id="StIDHolder"/>
                    <hr/>
                </div>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;           
                <button id="front<%= PID.ToString()%><%=StID.ToString()%>">Front</button>
                <button id="back<%= PID.ToString()%><%=StID.ToString()%>">Back</button> 
            </center>
            </td>
            <td>&nbsp;</td>
        </tr>
    </table>

Answer 1

Repeated

<button id="front">

and

$("body").on( 'click', "#front",function (e)

do not mix well.

Another thing. You must include jQuery javascript only once in a page.