Two instances of the same usercontrol in an asp.net page - asp.net

Question

In my webpage I use two user controls:
ucControl1 and ucControl2. The ucControl1 control also contains an instance of the ucControl2 control inside it.
When you run the application and go to the page in question, it appears that only the instance that is inside the ucControl1 is working correctly. When trying to execute the functionality of the ucControl2 that is directly on the page, it correctly executes the backend code, opens the modal correctly but does not show the results on the screen.
What could be happening?
The page is like this
<%# Page Language="C#" AutoEventWireup="true" CodeFile="PageSample.aspx.cs" MasterPageFile="~/MasterPage.master" Inherits="PageSample" %>
<%# MasterType VirtualPath="~/MasterPage.master" %>
<%# Register Src="~/Controls/ucControl2.ascx" TagPrefix="uc2" TagName="ucControl2" %>
<%# Register Src="~/Controls/ucControl1.ascx" TagPrefix="uc1" TagName="ucControl1" %>
<asp:Content runat="server" ContentPlaceHolder ID="cpSampleID">
<div>
<uc1:ucControl2 runat="server" ID="uc2" />
</div>
<uc1:ucControl1 runat="server" ID="uc1" />
</asp:Content>
And the usercontrol1
<%# Control Language="C#" AutoEventWireup="true" CodeFile="ucControl1.ascx.cs" Inherits="ucControl1" %>
<%# Register Src="~/Controls/ucControl2.ascx" TagPrefix="uc1" TagName="ucControl2" %>
<%-- Something Something Something --%>
<uc1:ucControl2 runat="server" ID="ucControl2" />

Answer 1

I've found a solution. The modal is opened by javascript.
ucControl2
<%# Control Language="C#" AutoEventWireup="true" CodeFile="ucControl2.ascx.cs" Inherits="ucControl2" %>
<%# Register Src="~/Controls/ucControl2.ascx" TagPrefix="uc2" TagName="ucControl2" %>
<div id="modal">
<!-- Some Textboxes -->
</div>
Method to open the modal
public void OpenModal()
{
string id = "modal";
string js = $#"
$(document).ready(function() {{
if ($('.modal.in').length > 0) {{
$('.modal').on('hidden', function() {{
$('.modal').off('hidden');
$('#{id}').modal({{show: true, keyboard: false, backdrop: 'static'}});
}});
$('.modal').modal('hide');
}} else {{
$('#{id}').modal({{show: true, keyboard: false, backdrop: 'static'}});
}}
}});";
ScriptManager.RegisterStartupScript(this, this.GetType(), id, js, true);
}
So when the control is called, the javascript does not know which of the controls should open, and in this case it is opening the first control that is on the page.
To solve it I've changed the div through an asp panel, in this way asp generates a different client ID for each control and the controls are displayed correctly.