Primefaces components panelGrid and repeat do not work together when used with ajax update

Question

I have a web page with an assortment of primefaces components. I want to show data on the page in the format as seen below:

The table consists of 3 rows:

Row 1 has 3 columns. Column 1 has a set of checkboxes. Clicking on a checkbox in that list loads Rows 2 and 3 conditionally by doing ajax update of the panels inside these rows.

This implementation was initially done in richfaces and used rowBreakBefore attribute of richfaces columns to put a line break between rows.

After converting the component to primefaces, I lost the ability to use rowBreakBefore to manipulate the column to fall on a new line. I moved the implementation to panelgrid and repeat; panelgrid handling the layout and repeat handling the rows.

But I'm not able to show the rows conditionally(using an ajax update of the panel components in Rows 2 and 3) based on clicking a checkbox in Row 1 Column 1.

If I save the page after selecting the required checkbox in Column 1, it correctly shows error because the checkbox list in Row 2 is a required field and the Row 2 also shows up.

I want to show the row to the user just by clicking the checkbox and don't want to do a full page refresh.

Code for the grid layout

<p:panelGrid id="decisionsTable">
    <p:row/>
    <f:facet name="header">
        <p:row>
            <p:column>
            </p:column>
            ...
        </p:row>
    </f:facet>
    <p:repeat var="" varStatus="" value="}">
        <p:row id="">
            <p:column id="" style="width: 40%">                                                                                                             
                <p:outputPanel id="">
                    <h:panelGroup rendered="">
                        <div class="dataLabelNarrow"></div>
                        <div class="data listBox required">
                            <h:selectManyCheckbox value="" layout="pageDirection"
                                                  converter="javax.faces.Long">
                                <f:selectItems value="" var="" itemLabel="" itemDescription=""
                                               itemValue=""/>
                                <p:ajax event="valueChange" process="@this"
                                               update="@form @([id$=sectionToUpdate]) 
                                                       @([id$=anotherSectionToUpdate])"/>
                            </h:selectManyCheckbox>
                        </div>
                    </h:panelGroup>                               
                </p:outputPanel>                            
            </p:column>
            <p:column id="" style="width: 40%">
                ...
            </p:column>
            <p:column id="" style="width: 20%">
                ...                           
            </p:column>
        </p:row>
        <p:row rendered="...">
            <p:column colspan="3">
                <p:outputPanel id="sectionToUpdate">
                    <h:panelGroup>
                          ...
                    </h:panelGroup>
                </p:outputPanel>
            </p:column>
        </p:row>
        <p:row rendered="...">
            <p:column colspan="3">
                <p:outputPanel id="anotherSectionToUpdate">
                    <h:panelGroup>
                          ...
                    </h:panelGroup>
                </p:outputPanel>
            </p:column>
        </p:row>
        <p:row id="">
            <p:column colspan="3">
                ...
            </p:column>
        </p:row>
    </p:repeat>
</p:panelGrid>