Implement ASP.NET AJAX Nested Modal Popup Extender control

I am trying to have a ModalPopupExtender within another ModalPopupExtender in a user control page, button an error like "The TargetControlID of 'ModalPopupExtender2' is not valid. A control with ID 'btnAdd' could not be found. I don't have any problem with ModalPopupExtender1, but the problem is with opening ModalPopupExtender2 once the ModalPopupExtender1 is opened.

 <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="ImageButton1"
        PopupControlID="Panel1" BackgroundCssClass="modalBackground">
    </asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center">      
        <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
            <asp:TabPanel ID="TabPanel1" runat="server" >
                <ContentTemplate>
                    <asp:Button ID="btnAdd" runat="server" Text="Add" /><br>                   
                    <asp:Button ID="btnOk" runat="server" Text="Ok" />
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                </ContentTemplate>
            </asp:TabPanel>
            <asp:TabPanel ID="TabPanel2" runat="server" >
                <ContentTemplate>
                    <asp:Button ID="btnAdd1" runat="server" Text="Add" /><br>                    
                    <asp:Button ID="btnOk1" runat="server" Text="Ok" />
                    <asp:Button ID="btnCancel1" runat="server" Text="Cancel" />
                </ContentTemplate>
            </asp:TabPanel>
        </asp:TabContainer>        
    </asp:Panel>
    <asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="btnAdd"
        PopupControlID="Panel2" BackgroundCssClass="modalBackground">
    </asp:ModalPopupExtender>
    <asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" align="center">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>        
    </asp:Panel>