I am really stuck with this for the last 2 days and am struggling to understand how Primefaces updates UI components on the client based on their ID.

I have a h:selectOneMenu with a count for the number of panels to be displayed. Each p:panel will contain a panelGrid with numerous form elements. The onchange event on the drop down is fired and I can see the count in the Managed Bean. I do not see panels increasing dynamically on the client side though.i think something is wrong with my p:ajax params, but I don;t fully understand how it works. here is the relevant code:

    <h:selectOneMenu id="numapps" value="#{mbean.appCount}">
                <f:selectItem itemLabel="1" itemValue="1" />
                <f:selectItem itemLabel="2" itemValue="2" />
                <f:selectItem itemLabel="3" itemValue="3" />
                <f:selectItem itemLabel="4" itemValue="4" />
                <f:selectItem itemLabel="5" itemValue="5" />
                <p:ajax update="appsContainer" event="change"   
                    listener="#{mbean.onChangeNumApps()}" />    
    </h:selectOneMenu>

    <p:panel id="appsContainer" >
           <p:panel header="Application" id="appsPane" value="#{mbean.submittedApps}" var="app" multiple="true">

submittedApps is a List containing the panel form elements. Here is my mbean listener:

public void onChangeNumApps()
{
    List<Apps> c = new ArrayList<Apps>();
    logger.info("on change event fired");
    logger.info("new value is "+mbean.getAppCount());
    for (int i=0;i < mbean.getAppCount();i++)
    {
        c.add(new App());
    }
    mbean.setSubmittedApps(c);
}

I am mixing p:ajax with h:selectone because i could not get p:selectone working for some reason - possibly due to a CSS collision with my stylesheet??