I'm stuck on dynamic panel

I met a problem for two days. nowhere I advance my problem is to make a dynamic content in a panel according to the selected element in the list p: selectOneMenu

    <h:outputLabel value="Categorie :"  />  
                <p:selectOneMenu  value="#{composantbean.selectedCategoryId}" required="true" >  
                    <f:selectItem itemLabel="Select categorie" itemValue="" />  
                    <f:selectItems  value="#{composantbean.listcat}" var="cat" itemValue="#{cat.nomCat}" itemLabel="#{cat.nomCat}" /> 
                    <p:ajax update="panl"  event="change" listener="#{composantbean.catListener()}"/>
                </p:selectOneMenu>  


<p:panel id="panl" header ="Caracteristique selon la categorie" toggleable="true" rendered="true" >

            <h:panelGrid  id="panlecart" columns="2" cellpadding="5" rendered="true">
            <c:forEach items="#{composantbean.categorie.proprietes}"  var="var">

            <h:outputText value="#{var.nomProp}"/>
            <h:inputText value="" />

            </c:forEach>
         </h:panelGrid>
          </p:panel>

content appears this is true but unfortunately it is not synchronized is displayed shift but if I use another <p: selectOneMenu id = "panel" content is displayed and synchronized

Haw can I fixe my prblem .Please and thank you in advance

Solution

As Lucas said, it is a bad idea using c:foreach (and all kind of JSTL) in JSF, especially with ajax. Here are references you should read, to know more about JSTL in JSF:

Using ui:repeat in h:panelGrid is not recommended also. You may read the discussion here.

So, IMHO, you should try another approach, such as using dataTable, as stated in above link.
Or, you could use html's table tag (<table>) as replacement of h:panelGrid, with html's tr and td tag inside ui:repeat. For example:

<h:outputLabel value="Categorie :"  />  
<p:selectOneMenu  value="#{composantbean.selectedCategoryId}" required="true" >  
  <f:selectItem itemLabel="Select categorie" itemValue="" />  
  <f:selectItems  value="#{composantbean.listcat}" var="cat" itemValue="#{cat.nomCat}" itemLabel="#{cat.nomCat}" /> 
  <p:ajax update="panl"  event="change" listener="#{composantbean.catListener()}"/>
</p:selectOneMenu>  

<p:panel id="panl" header ="Caracteristique selon la categorie" toggleable="true" rendered="true" >

  <table>
  <ui:repeat value="#{composantbean.categorie.proprietes}"  var="var">
    <tr>
      <td><h:outputText value="#{var.nomProp}" /></td>
      <td><h:inputText value="" /></td>
    </tr>
  </ui:repeat>
  </table>
</p:panel>