Multiple instances of user controls with jquery

I am using multiple instances of user control in a page. the Jquery effect only the first usercontrol and all other user controls gets the "first user control" design changes.

Please how can i solve this?

this is my UserControl:

Jquery

 $(document).ready(function () {

        if ($(".SubCompanyTypes").is(":visible")) {
            $(".MainCompanyTypes").css("width", "240px");
            $(".SubCompanyTypes").css("width", "96px");
        }

        else
        {
            $(".MainCompanyTypes").css("width", "70px");
            $(".SubCompanyTypes").css("width", "96px");
        }

    });




 <asp:DropDownList ID="ddlMainCompanyTypes" runat="server" Width="342px"  CssClass="MainCompanyTypes"
                    OnSelectedIndexChanged="ddlMainCompanyTypes_SelectedIndexChanged"
                    AutoPostBack="true">
                    <asp:ListItem Text="-Select-" Value="" />
                </asp:DropDownList>

   <asp:DropDownList ID="ddlSubCompanyTypes" runat="server" Width="300px" Visible="false"  CssClass="SubCompanyTypes"
                    AutoPostBack="true" 
OnSelectedIndexChanged="ddlSubCompanyTypes_SelectedIndexChanged">
                </asp:DropDownList>

Try this one:

$(document).ready(function () {
$(".SubCompanyTypes").each(function(){
    if ($(this).is(":visible")) {
           // $(".MainCompanyTypes").css("width", "240px");
           // for .MainCompanyTypes check the previous control and apply css
             $(this).prev('.MainCompanyTypes').css("width", "240px");
             $(this).css("width", "96px");
        }
        else
        {
           // $(".MainCompanyTypes").css("width", "70px");
              $(this).prev('.MainCompanyTypes').css("width", "70px");
              $(this).css("width", "96px");
        }

   });
});