Putting <span> inside a <p:panelGrid> causes "weird" display - jsf-2

Question

I want to create dynamic forms with ajax update on event. Therefore dynamic-id is important. However, binding the id attribute to a bean value causes Empty Id exception. I saw one of the stackoverflow questions that suggests use html. So I used span.
The xhtml code is as follows:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" template="../../templates/ui.xhtml">
<ui:define name="content">
<h:form id="testform">
<ui:repeat value="#{repeat.questions}" var="question">
<p:panelGrid columns="2">
<p:outputLabel value="#{question.label}"/>
<span id="#{question.questionCode}">
<p:inputText value="#{repeat.values[question.questionCode]}"
rendered="#{question.type == 'TEXT'}">
<p:ajax event="blur" update="#{question.dependentQuestionCode}"
disabled="#{empty question.dependentQuestionCode}"/>
</p:inputText>
<p:password value="#{repeat.values[question.questionCode]}"
rendered="#{question.type == 'SECRET'}">
</p:password>
<p:inputTextarea value="#{repeat.values[question.questionCode]}"
rendered="#{question.type == 'TEXTAREA'}">
</p:inputTextarea>
<p:selectOneRadio value="#{repeat.values[question.questionCode]}"
rendered="#{question.type == 'RADIO'}" layout="grid" columns="1">
<f:selectItems value="#{question.options}"/>
</p:selectOneRadio>
<p:selectOneMenu value="#{repeat.values[question.questionCode]}"
rendered="#{question.type == 'SELECTONE'}">
<f:selectItems value="#{question.options}"/>
</p:selectOneMenu>
<p:selectManyMenu value="#{repeat.values[question.questionCode]}"
rendered="#{question.type == 'SELECTMANY'}">
<f:selectItems value="#{question.options}"/>
</p:selectManyMenu>
<p:selectBooleanCheckbox
value="#{repeat.values[question.questionCode]}"
rendered="#{question.type == 'CHECKONE'}"/>
<p:selectManyCheckbox value="#{repeat.values[question.questionCode]}"
rendered="#{question.type == 'CHECKMANY'}">
<f:selectItems value="#{question.options}"/>
</p:selectManyCheckbox>
</span>
</p:panelGrid>
</ui:repeat>
<p:commandButton value="Submit" actionListener="#{repeat.submit}"/>
</h:form>
</ui:define>
</ui:composition>
However, the display is weird. It closed the span in each iteration. Why the span closed unreasonably before span close tag?

Answer 1

The <h|p:panelGrid> only divides real JSF component children into columns, not plain HTML elements.
Put that <span> (or better, <div>) as immediate child of <ui:repeat>.
<ui:repeat value="#{bean.questions}" var="question">
<div id="#{question.code}">
<p:panelGrid>
...
</p:panelGrid>
</div>
</ui:repeat>