Values repeated in jsf <ui:repeat> - ajax

Question

I have repeated values on my form. I am using <ui:repeat> tag.
My code:
<h:panelGroup id="alvs">
<ui:repeat value="#{encuestaController.newEncuesta.preguntas}" var="preg">
<h:outputLabel for="preg" value="add question:" style="font-weight:blue" />
<p:inputText id="preg" value="#{preg.pregunta}" />
<h:outputLabel for="value2" value="The question is option:" style="font-weight:bold" />
<p:selectBooleanButton id="value2" value="#{preg.opcional}" onLabel="Si" offLabel="No" onIcon="ui-icon-check" offIcon="ui-icon-close" style="width:60px">
<p:ajax update="f1:growl2"/>
</p:selectBooleanButton>
<h3 style="margin-top:2px">Question Type</h3>
<p:selectOneMenu value="#{preg.tipo}">
<f:selectItem itemValue="1" itemLabel="one option" />
<f:selectItem itemValue="2" itemLabel="many option" />
</p:selectOneMenu>
<h:panelGroup id="aux">
<ui:repeat value="#{preguntaController.newPregunta.opciones}" var="opc">
<h:panelGroup id="pn11" rendered="#{preg.tipo eq 1}">
uno<p:inputText value="#{opc.descripcion}"/>
</h:panelGroup>
<h:panelGroup id="pn12" rendered="#{preg.tipo eq 2}" >
dos<p:inputText value="#{opc.descripcion}"/>
</h:panelGroup>
</ui:repeat>
</h:panelGroup>
</ui:repeat>
</h:panelGroup>
<p:commandButton class="btn-floating btn-large waves-effect waves-light red" actionListener="#{preguntaController.addOcion}" update="f1:growl2" value="Add" >
<f:ajax execute="pn11 pn12" render="alvs" />
</p:commandButton>
The problem is when I want to add a new option(opciones) in the question(pregunta) with <p:commandButton/>
This adds the same options for the previous question as for the new one.
Maybe, the error is ajax? <f:ajax execute="pn11 pn12" render="alvs" />
Help me!!!
Image Description

Answer 1

As i see it, the problem is regarding the fact that you are producing multiple options using the ui:repeat, but you are declaring the same id for each of the panelGroups inside.
Add some custom prefix or sufix to each of the ids based on some unique value from the var="opt" (like an id):
<ui:repeat value="#{preguntaController.newPregunta.opciones}" var="opc">
<h:panelGroup id="pn11#{opc.id}" rendered="#{preg.tipo eq 1}">
uno<p:inputText value="#{opc.descripcion}"/>
</h:panelGroup>
<h:panelGroup id="pn12#{opc.id}" rendered="#{preg.tipo eq 2}" >
dos<p:inputText value="#{opc.descripcion}"/>
</h:panelGroup>
</ui:repeat>
Otherwise you will keep overriding the previous panelGroup's.
Also you would need to use a broader scope of execution for your ajax request.
I would use the first panelGroup outside of the ui:repeat:
<f:ajax execute="aux" render="alvs" />