Using multiple FluidGrids in one form

Question

I am working on creating a dynamic form using Primefaces 5.2, FluidGrid (PrimeFaces Extensions 3.1.0)

I have my form in several sub sections so I create a private HashMap<PDIDefinition, List<FluidGridItem>> formItems; where PDIDefinition represents one section of the form.

In my view i then:

<ui:repeat var="pdi" value="#{FormGenerator.formItems.keySet().toArray()}" id="all">

        <p:panel header="#{pdi.getFragmentDefinition().getFragmentName()}" style="margin-bottom:1em; width:100%;">

            <pe:fluidGrid id="fluidGrid" value="#{FormGenerator.formItems.get(pdi)}" var="data"
                          hGutter="20" vGutter="10" widgetVar="fluidGridWdgt" 
                          >
                <pe:fluidGridItem type="stringValue" >
                    <div class="dynaFormLabel">
                        <p:outputLabel for="txt" value="#{data.label}"/>
                    </div>
                    <p:inputText id="txt" value="#{data.value}" />
                </pe:fluidGridItem>
                <pe:fluidGridItem type="integerValue">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="int" value="#{data.label}"/>
                    </div>
                    <p:spinner id="int" value="#{data.value}" />
                </pe:fluidGridItem>
                <pe:fluidGridItem type="dateValue" styleClass="calendar">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="cal" value="#{data.label}"/>
                    </div>
                    <p:calendar id="cal" value="#{data.value}" showOn="button"/>
                </pe:fluidGridItem>
            </pe:fluidGrid>
        </p:panel>
    </ui:repeat>

    <p:commandButton action="#{FormGenerator.saveValues}" process="form"/>

As you can see I add a Panel for each section and then add a fluidGrid for each section.

My probölem however is that the data in the backend is only stored for the last fluidGrid not for all. I have checked the network log of chrome and can see that all values are submitted to the server.

So my question: How can I ensure that all the data on the server is updated. Or: Is there a way I can group the elements within a single FluidGrid?

More information from the backing bean (item creation process):

private void generateModel() {

    fragments = new ArrayList<>();
    fragmentValues = new ArrayList<>();
    formItems = new HashMap<>();
    fields = new ArrayList<>();

    for (PDIDefinition pdid : pdiDefinitions) {

        Fragment f = new Fragment();
        f.setDefinition(pdid.getFragmentDefinition());
        fragments.add(f);
        List<FluidGridItem> items = new ArrayList<>();
        formItems.put(pdid, items);

        for (FragmentValueDefinition fvd : f.getDefinition().getFragmentValues()) {

            FragmentValue fv = new FragmentValue();
            fv.setFragmentValueDefinition(fvd);
            fv.setFragmentId(f.getInner());
            if (f.getValues() == null) {
                f.setValues(new ArrayList<>());
            }
            f.getValues().add(fv);
            fragmentValues.add(fv);
            DynamicField df = new DynamicField((fv));
            fields.add(df);
            if ("String".equals(fvd.getType())) {
                items.add(new FluidGridItem(df, "stringValue"));
            }
            if ("Integer".equals(fvd.getType())) {
                items.add(new FluidGridItem(df, "integerValue"));
            }
            if ("Date".equals(fvd.getType())) {
                items.add(new FluidGridItem(df, "dateValue"));
            }
        }

    }

}

---

EDIT

Changed the xhtml to reflect new findings: <h:form> within <ui:repeat> not entirely working, only the last <h:form> is processed

However values of all but last iteration of <p:dataList> are not updated on server on submit (Values on Submit are reset on the client). Values of the last iteration are stored on the server.

   <p:dataList var="pdi" value="#{FormGenerator.formItems.keySet()}" id="all" varStatus="loop" type="none" >
        <p:panel id="panel" header="#{pdi.getFragmentDefinition().getFragmentName()}" style="margin-bottom:1em; width:100%;">
            <pe:fluidGrid  id="fluidGrid" value="#{FormGenerator.formItems[pdi]}" var="data"
                           hGutter="20" vGutter="10" >

                <pe:fluidGridItem type="stringValue"  id="txt_">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="txt" value="#{FormGenerator.formItems[pdi][data.id].getData().label}"/>
                    </div>
                    <p:inputText id="txt" value="#{FormGenerator.formItems[pdi][data.id].getData().value}"/>
                </pe:fluidGridItem>
                <pe:fluidGridItem type="integerValue" id="int_">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="int" value="#{FormGenerator.formItems[pdi][data.id].getData().label}"/>
                    </div>
                    <p:spinner id="int" value="#{FormGenerator.formItems[pdi][data.id].getData().value}" />
                </pe:fluidGridItem>
                <pe:fluidGridItem type="dateValue" id="cal_">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="cal" value="#{FormGenerator.formItems[pdi][data.id].getData().label}"/>
                    </div>
                    <p:calendar id="cal" value="#{FormGenerator.formItems[pdi][data.id].getData().value}" showOn="button"/>
                </pe:fluidGridItem>

            </pe:fluidGrid>
        </p:panel>
    </p:dataList>

Partial POST request on submit as chrome shows me:

form:form
form:all:0:fluidGrid:txt:n
form:all:0:fluidGrid:TV5Wd2IL:txt:
form:all:0:fluidGrid:CYqNHGWx:int_input:
form:all:0:fluidGrid:Y6QIaH1C:cal_input:
form:all:1:fluidGrid:hvi81zhh:txt:k
form:all:1:fluidGrid:iY1YsIDm:txt:
form:all:2:fluidGrid:BA6slTyQ:txt:p

i had entered "n","k" and "p" to the input fields. only "p" was stored on the server.