Dynamically generated panelGroup can't be located - jsf

Question

I have the following structure in my application:
<h:outputLabel value="Regiões :" />
<p:autoComplete multiple="true" value="#{investimento.regioesSelecionadas}"
completeMethod="#{investimento.completaRegiao}"
var="reg" itemLabel="#{reg.label}" itemValue="#{reg}"
converter="entityConverter" forceSelection="true">
<p:column>
<h:outputText value="#{reg.label}" />
</p:column>
<p:ajax event="itemSelect" update="regiaoCol" />
<p:ajax event="itemUnselect" update="regiaoCol" />
<p:ajax event="itemUnselect" listener="#{investimento.tiraUmaRegiao}"/>
</p:autoComplete>
<h:outputText />
<h:panelGroup id="regiaoCol">
<c:forEach items="#{investimento.regioesSelecionadas}" var="regSel" rendered="#{!investimento.regioesSelecionadas.isEmpty()}">
<h:panelGrid columns="2">
<h:outputLabel value="Região #{regSel.label} - Estados:" />
<p:autoComplete multiple="true" value="#{investimento.estadosSelecionados}"
var="est" itemLabel="#{est.label}" itemValue="#{est}"
completeMethod="#{investimento.completaEstado}"
converter="entityConverter" forceSelection="true" cash="true">
<f:attribute name="regPar" value="#{regSel}" />
<p:column>
<h:outputText value="#{est.label}" />
</p:column>
<p:ajax event="itemSelect" update="#{investimento.idComposta(est, regSel)}" />
<p:ajax event="itemUnselect" update="regiaoCol" />
<p:ajax event="itemUnselect" update="#{investimento.idComposta(est, regSel)}"/>
<p:ajax event="itemUnselect" update="#{investimento.idComposta(est, regSel)}" listener="#{investimento.tiraUmEstado}"/>
</p:autoComplete>
<h:outputLabel />
<h:panelGroup id="#{investimento.idComposta(est, regSel)}">
<c:forEach items="#{investimento.estadosSelecionados}" var="estSel">
<h:panelGrid columns="2">
<h:outputLabel value="Estado #{estSel.label} - Municipios: #{investimento.idComposta(est, regSel)}" />
<p:autoComplete multiple="true" value="#{investimento.municipiosSelecionados}"
var="mun" itemLabel="#{mun.label}" itemValue="#{mun}"
completeMethod="#{investimento.completaMunicipio}" maxResults="8"
converter="entityConverter" forceSelection="true" cash="true">
<f:attribute name="estPar" value="#{estSel}" />
<p:column>
<h:outputText value="#{mun.label}" />
</p:column>
</p:autoComplete>
</h:panelGrid>
</c:forEach>
</h:panelGroup>
</h:panelGrid>
</c:forEach>
</h:panelGroup>
So, whenever I pick a "Região" will apear in "regiaoCol" new options for the user to select. However there's an issue: when I remove a "Região", add it again and try to remove it once more, it causes the following error:
> Grave: Error Rendering View[/InsI.xhtml]
javax.faces.FacesException: Cannot find component with expression "munEst2Reg3" referenced from "form:j_idt190".
at org.primefaces.expression.SearchExpressionFacade.resolveComponentInternal(SearchExpressionFacade.java:422)
at org.primefaces.expression.SearchExpressionFacade.resolveComponentForClient(SearchExpressionFacade.java:200)
at org.primefaces.expression.SearchExpressionFacade.resolveComponentsForClient(SearchExpressionFacade.java:147)
at org.primefaces.util.AjaxRequestBuilder.addExpressions(AjaxRequestBuilder.java:92)
at org.primefaces.util.AjaxRequestBuilder.update(AjaxRequestBuilder.java:85)
at org.primefaces.behavior.ajax.AjaxBehaviorRenderer.getScript(AjaxBehaviorRenderer.java:80)
at javax.faces.component.behavior.ClientBehaviorBase.getScript(ClientBehaviorBase.java:103)
at org.primefaces.renderkit.CoreRenderer.encodeClientBehaviors(CoreRenderer.java:458)
Which, I presume, is caused by the browser looking for that reference, in this case "munEst2Reg3" and it not being there. However: why it throws the error? How is it different from removing the "Região" the first time? How to I solve the issue? Should I submit the page after each unselection? (which wouldn't be the most user friendly option)

Answer 1

Tiny's response put me on the right track and, after some debuging I found somethings:
As all the instances are altering the same list is paramount that all of them have a event or one will delete the inputs of the other;
You have also to take care on how the dataTable behaves and guarantee that he only gets the values that you are interested in;
How my code ended up being:
<h:outputLabel value="Regiões :" />
<p:autoComplete multiple="true" value="#{investimento.regioesSelecionadas}"
completeMethod="#{investimento.completaRegiao}"
var="reg" itemLabel="#{reg.label}" itemValue="#{reg}"
converter="entityConverter" forceSelection="true">
<p:column>
<h:outputText value="#{reg.label}" />
</p:column>
<p:ajax event="itemSelect" update="regiaoCol" />
<p:ajax event="itemUnselect" update="regiaoCol" listener="#{investimento.tiraUmaRegiao}"/>
</p:autoComplete>
<h:outputText />
<h:panelGroup id="regiaoCol">
<p:dataTable value="#{investimento.regioesSelecionadas}" var="regSel" rendered="#{investimento.regioesSelecionadas.isEmpty() == false}">
<p:column>
<h:outputLabel value="Região #{regSel.label} - Estados:" />
</p:column>
<p:column>
<p:autoComplete multiple="true" value="#{investimento.estadosSelecionados}"
var="est" itemLabel="#{est.label}" itemValue="#{est}"
completeMethod="#{investimento.completaEstado}"
converter="entityConverter" forceSelection="true">
<f:attribute name="regPar" value="#{regSel}" />
<p:column>
<h:outputText value="#{est.label}" />
</p:column>
<p:ajax event="itemSelect" update="#{investimento.idComposta()}" >
<f:attribute name="regiaoPar" value="#{regSel}" />
</p:ajax>
<p:ajax event="itemUnselect" update="#{investimento.idComposta()}" listener="#{investimento.tiraUmEstado}">
<f:attribute name="regiaoPar" value="#{regSel}" />
</p:ajax>
</p:autoComplete>
</p:column>
<p:column>
<h:panelGroup id="#{investimento.idComposta()}">
<f:attribute name="regiaoPar" value="#{regSel}" />
<p:dataTable value="#{investimento.meusEstSel()}" var="estSel" rendered="#{investimento.meusEstSel().isEmpty() == false}">
<f:attribute name="regiaoPar" value="#{regSel}" />
<p:column>
<h:outputLabel value="Estado #{estSel.label} - Municipios:" />
</p:column>
<p:column>
<p:autoComplete multiple="true" value="#{investimento.municipiosSelecionados}"
var="mun" itemLabel="#{mun.label}" itemValue="#{mun}"
completeMethod="#{investimento.completaMunicipio}" maxResults="8"
converter="entityConverter" forceSelection="true">
<f:attribute name="estPar" value="#{estSel}" />
<p:column>
<h:outputText value="#{mun.label}" />
</p:column>
<p:ajax event="itemSelect" />
<p:ajax event="itemUnselect" />
</p:autoComplete>
</p:column>
</p:dataTable>
</h:panelGroup>
</p:column>
</p:dataTable>
</h:panelGroup>