2 instances of a controls - 1 control gets javascript, other does not

I have a user control called "Payment Methods". I have two instance of the control on the same page.

<JJ:PaymentMethods ID="paymentMethodsControl" runat="server" />
<JJ:PaymentMethods ID="payment2MethodsControl" runat="server" />

There are two so we can allow our customers to use a split payment option and use two cards.

Each contain this markup.

<asp:Panel ID="mainPaymentMethodsPanel" runat="server">
    <div>
        <div style="float:left;padding-left: 20px;">
            Select a card: 
        </div>
        <div style="float:left;padding-left: 20px;">
            <telerik:RadComboBox ID="ddlPaymentMethods" BorderStyle="Solid" BorderWidth="1px" BorderColor="Purple" OnClientSelectedIndexChanged="openWinContentTemplate" runat="server"></telerik:RadComboBox>
        </div>
    </div>
</asp:Panel>


<asp:Panel ID="debugPanel" runat="server" Visible="false">
    <br />
    <br />
    <hr />    
    <asp:Label ID="debugInfo" runat="server"></asp:Label>    
</asp:Panel>
<telerik:RadWindowManager ID="CreateNewCardWindowManager" runat="server" VisibleStatusbar="false">
<Windows>
<telerik:RadWindow ID="CreateNewCardWindow" runat="server" Modal="true" Width="375px"
            KeepInScreenBounds="true" Height="155px" RestrictionZoneID="ContentTemplateZone"
            Animation="Fade" IconUrl="/Images/JJIcon16x16.jpg" behavior="Close, Move">
<ContentTemplate>
<asp:Panel ID="proPayPanel" runat="server" Visible="true" style="text-align:left;">
    <div>
        <div style="float:left;padding-left: 47px;">
            Card Type: 
        </div>
        <div style="float:left;padding-left: 4px;">
            <telerik:RadComboBox ID="ddlPaymentTypes" BorderStyle="Solid" BorderWidth="1px" BorderColor="Purple" runat="server"></telerik:RadComboBox>
        </div>
    </div>
    <div style="clear:both;padding-top: 4px;padding-left:26px">
        <div id="cardNumberLabel" style="padding-left: 3px;">
            Card Number: 
            <iframe id="proPayIFrame" runat="server" src="/Images/ajax_loader.gif" style="float:right; border:0px; height: 42px; width: 350px; margin-left: -23px;"></iframe>
            <input type="button" id="checkStatusButton" runat="server" style="visibility:hidden"/>
            <div id="iframeStatus" style="visibility:hidden" >LOAD</div>
        </div>
    </div>
</asp:Panel>
</ContentTemplate>
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>

The RadComboBox(which is just a DropDownList) has an item called "Add new card". This pops open a RadWindow(or just a new window for those not familiar with telerik) and contains the I-frame where they can add the new card details. This works great on 1 of the controls, however, it will not work on the 2nd instance of the control, and I have a gut feeling that it's because of how I am getting the ID in my javascript.

JS

<script type="text/javascript">
    function checkStatus() {
        var statusDiv = $("#iframeStatus");
        var wnd = $find("<%=CreateNewCardwindow.ClientID %>");

        if (statusDiv.html() == "SAVE" || statusDiv.html() == "CANCEL") {

            wnd.close();
            statusDiv.html("LOAD");

            $("#<%=checkStatusButton.ClientID %>")[0].click();
            

        }

       
    }

    function openWinContentTemplate() {
        var oManager = $find("<%=CreateNewCardWindowManager.ClientID %>");
        var ddlIndexChange = $find("<%= ddlPaymentMethods.ClientID %>");

        if (ddlIndexChange.get_selectedItem().get_value() == "000000") {

            oManager.open(null, "CreateNewCardWindow");
        }
    }
</script>

So to summarize this, I load my page, select the dropdown of payment 1 "add new card". It pops open my window and all is dandy.

I go to my second dropdown, select the dropdown of payment 2 "add new card" and it does a postback with nothing. No errors come back in firebug either.

Any help would be greatly appreciated and would sooth migraine being caused by such.