How to maintain accordionPanels in the same order?

I'm using accordionPanel in Primefaces. When I refresh the page the order changes! For example: I have 1,2,3 then they become 2,3,1 or 3,2,1 ! The order of the panels changes everytime I refresh the page!

         <p:panel toggleable="true" header="Mesure" rendered="#{not empty mesureController.varValues['structure']}">

    <p:accordionPanel value="#{mesureController.structureComposants.toArray()}" var="sc">
        <p:tab title="#{sc.nomComposant}" closable="false">
            <p:dataTable value="#{sc.plans.toArray()}" var="plan" id="plansTable" emptyMessage="">
                <p:column headerText="Plan">
                    <p:outputLabel value="#{plan.nomPlan}"/>
                </p:column>

                <p:column headerText="Image">
                    <p:lightBox styleClass="imagebox" id="lighbox1"
                                rendered="#{not empty plan.image}">
                        <h:outputLink
                            value="data:image/png;base64,#{ligneBean.getImageContentsAsBase64(plan)}"
                            title="#{plan.commentaire}">
                            <img src="data:image/png;base64,#{ligneBean.getImageContentsAsBase64(plan)}"
                                style="height: 120px; width: auto; margin-right: 10px;"/>
                        </h:outputLink>
                    </p:lightBox>
                </p:column>

                <p:column headerText="#{mesureController.varValues['typeMesure']}">
                    <ui:repeat value="#{plan.reperes.toArray()}" var="repere">
                        <p:panelGrid columns="5" layout="grid">
                            <p:outputLabel id="nom_repere" value="#{repere.nomRepere}"/>
                            <p:tooltip id="toolTipGrow" for="nom_repere" value="#{repere.commentaire}"
                                       position="left"/>
                            <p:outputLabel value="#{repere.repereConfig.temperature.minTemperature}"
                                           title="min temperature"
                                           rendered="#{mesureController.selectedTypeMesure.name().equals('TEMPERATURE')}"/>
                            <p:outputLabel value="#{repere.repereConfig.epaisseur.minEpaisseur}"
                                           title="min epaisseur"
                                           rendered="#{mesureController.selectedTypeMesure.name().equals('EPAISSEUR')}"/>
                            <p:inputText value="#{mesureController.currentMesure.structureDetails[repere]}"
                                         disabled="#{not mesureController.firstTask}"
                                         converter="javax.faces.Double" converterMessage="valeur numerique"
                                         style="width: 50px">
                                <p:ajax event="change" listener="#{mesureController.validateMesureValue}"
                                        update=":iwFormsForm">
                                </p:ajax>
                            </p:inputText>
                            <p:outputLabel value="#{repere.repereConfig.temperature.maxTemperature}"
                                           title="max temperature"
                                           rendered="#{mesureController.selectedTypeMesure.name().equals('TEMPERATURE')}"/>
                            <p:outputLabel value="#{repere.repereConfig.epaisseur.maxEpaisseur}"
                                           title="max epaisseur"
                                           rendered="#{mesureController.selectedTypeMesure.name().equals('EPAISSEUR')}"/>
                        </p:panelGrid>
                    </ui:repeat>
                </p:column>

            </p:dataTable>
        </p:tab>
    </p:accordionPanel>
    <ui:fragment rendered="#{mesureController.typeStructure.equals('FOUR')}">
        <ui:include src="graph.xhtml"/>
    </ui:fragment>
    <p:accordionPanel value="#{mesureController.fourZones.toArray()}" var="fz" activeIndex="0,1,2,3,4,5">
        <p:tab title="#{fz.description}">
            <p:dataTable value="#{fz.points.toArray()}" var="fpoint" id="fpointsTable" emptyMessage="" >
                <p:column headerText="point">
                    <p:outputLabel value="#{fpoint.description}  #{fpoint.position}(m)"/>
                </p:column>
                <p:column headerText="#{mesureController.varValues['typeMesure']}">
                    <p:panelGrid columns="3" layout="grid">
                        <p:outputLabel value="#{fpoint.temperature.minTemperature}" title="min temperature"
                                       rendered="#{mesureController.selectedTypeMesure.name().equals('TEMPERATURE')}"/>
                        <p:outputLabel value="#{fpoint.epaisseur.minEpaisseur}" title="min epaisseur"
                                       rendered="#{mesureController.selectedTypeMesure.name().equals('EPAISSEUR')}"/>
                        <p:inputText value="#{mesureController.currentMesure.fourDetails[fpoint]}"
                                     converter="javax.faces.Double" converterMessage="valeur numerique"
                                     style="width: 50px">
                            <p:ajax event="change" update=":iwFormsForm"
                                    listener="#{mesureController.validateMesureFourValue}"/>
                        </p:inputText>
                        <p:outputLabel value="#{fpoint.temperature.maxTemperature}" title="max temperature"
                                       rendered="#{mesureController.selectedTypeMesure.name().equals('TEMPERATURE')}"/>
                        <p:outputLabel value="#{fpoint.epaisseur.maxEpaisseur}" title="max epaisseur"
                                       rendered="#{mesureController.selectedTypeMesure.name().equals('EPAISSEUR')}"/>
                    </p:panelGrid>
                </p:column>
            </p:dataTable>
        </p:tab>
    </p:accordionPanel>

    <p:accordionPanel value="#{mesureController.tadZones.toArray()}" var="tz">
        <p:tab title="#{tz.description}">
            <p:dataTable value="#{tz.points.toArray()}" var="tpoint" id="tpointsTable" emptyMessage="">
                <p:column headerText="point">
                    <p:outputLabel value="#{tpoint.description}  #{tpoint.position}(m)"/>
                </p:column>
                <p:column headerText="#{mesureController.varValues['typeMesure']}">
                    <p:panelGrid columns="3" layout="grid">
                        <p:outputLabel value="#{tpoint.temperature.minTemperature}" title="min temperature"
                                       rendered="#{mesureController.selectedTypeMesure.name().equals('TEMPERATURE')}"/>
                        <p:outputLabel value="#{tpoint.epaisseur.minEpaisseur}" title="min epaisseur"
                                       rendered="#{mesureController.selectedTypeMesure.name().equals('EPAISSEUR')}"/>
                        <p:inputText value="#{mesureController.currentMesure.tadDetails[tpoint]}"
                                     converter="javax.faces.Double" converterMessage="valeur numerique"
                                     style="width: 50px">
                            <p:ajax event="change" update=":iwFormsForm"
                                    listener="#{mesureController.validateMesureTADValue}"/>
                        </p:inputText>
                        <p:outputLabel value="#{tpoint.temperature.maxTemperature}" title="max temperature"
                                       rendered="#{mesureController.selectedTypeMesure.name().equals('TEMPERATURE')}"/>
                        <p:outputLabel value="#{tpoint.epaisseur.maxEpaisseur}" title="max epaisseur"
                                       rendered="#{mesureController.selectedTypeMesure.name().equals('EPAISSEUR')}"/>
                    </p:panelGrid>
                </p:column>
            </p:dataTable>
        </p:tab>
    </p:accordionPanel>

    <p:panel toggleable="true" header="Validation des mesures" rendered="#{mesureController.isValidationMesures()}">
        <p:panelGrid id="tmp_validation2" columns="2" class="Wid100">
            <h:outputLabel value="Valider les mesure *"/>
            <p:selectOneMenu value="#{mesureController.varValues['valider_les_mesures']}" required="true">
                <f:selectItem itemLabel="Sélectionner" itemValue="#{null}"/>
                <f:selectItem itemLabel="Oui" itemValue="Oui"/>
                <f:selectItem itemLabel="Non" itemValue="Non"/>
                <p:ajax event="change" process="@this"/>
            </p:selectOneMenu>
        </p:panelGrid>
    </p:panel>

</p:panel>

So I need to know how to fix that, in order to maintain the order of panels in the same way as it is in the html.