h：dataGrid的意外结果

Question

底层代码显示两个列表，而有四个panelGroup's。

<h:panelGrid id="panel" columns="4" border="1" cellpadding="0" cellspacing="2">                     
        <h:panelGroup><h:outputText value="#{ph.currentProduct.brand} #{ph.currentProduct.model}"/>
        </h:panelGroup>

        <h:panelGroup><h:outputText value="#{ph.currentProduct.price} грн"/>
        </h:panelGroup>

        <h:panelGroup>
            Наличие:
            <p:rating id="present" value="#{ph.currentProduct.present}" readonly="true" />
            <p:tooltip for="present" value="test" />
        </h:panelGroup>

        <h:panelGroup>
            <h:form id="buy_button" style="">
            <h:inputHidden value="#{ph.productId}" />
            <h:commandButton image="images/buy.png" action="#{ph.addToCart}" />
            </h:form>
        </h:panelGroup>                             
</h:panelGrid>

为什么？