how to create multiple jsf datatable on click of command button - jsf

Question

as per my requirement I have to create multiple blank datatable in ui on click of a button .
user can continuously add more tables on click .
as per my understanding I can add one datatable and can iterate over collection but how to add more.
<h:commandButton immediate="true" styleClass="search_btn" value="Search" >
<f:ajax listener="#{relationBean.searchRelation}" event="click" />
</h:commandButton>
<h:commandButton immediate="true" value="Add Value">
<f:ajax listener="#{relationBean.addTable}" execute="relationId" event="click" />
</h:commandButton>
<div class="clear"> </div>
<h:dataTable rendered="#{relationBean.flagForDatatable}" value="# {relationBean.elementRelationList}" var="element">
<h:column>
<f:facet name="header"> Relation Type Name</f:facet>
<h:outputText value="#{element.relationType}" />
</h:column>
<h:column>
<f:facet name="header"> Value</f:facet>
<h:inputText value="#{element.relationForm}" />
</h:column>
<h:column>
<f:facet name="header">language</f:facet>
<h:outputText value="#{element.languageCode.languageName}" />
</h:column>
<h:column>
<f:facet name="header"> Delete</f:facet>
<h:commandButton value="Delete" />
</h:column>
</h:dataTable>

Answer 1

You can just use <ui:repeat> to iterate over a collection and render the same JSF component structure multiple times.
<ui:repeat value="#{bean.datatables}" var="datatable">
<h:dataTable value="#{datatable.value}" var="item">
...
</h:dataTable>
</ui:repeat>
In the command button, just add a new item to the collection behind #{bean.datatables}.

Answer 2

Belwo is the applied logic
<h:inputText id="relationId" class="relationship" value="#{relationBean.relationName}" required="true" requiredMessage="Enter relation">
<f:ajax></f:ajax>
</h:inputText> </div>
<h:commandButton styleClass="search_btn" >
<f:ajax listener="#{relationBean.searchRelation}" event="click" render="addBtn" execute="#all"/>
</h:commandButton>
<h:messages id="msgGlobal" globalOnly="true"/>
<h:commandButton id="addBtn" disabled="#{relationBean.showButton}" class="addvalue" value="Add Value">
<f:ajax listener="#{relationBean.addValue}" render="r" event="click" />
</h:commandButton>
<div class="clear"> </div>
<h:panelGroup id="r" >
<c:forEach id="repeat" items="#{relationBean.datatables}" var="">
<h:dataTable id="datatable" value="#{relationBean.languageDTOList}" var="lang">
<h:column>
<f:facet name="header"> Relation Type Name</f:facet>
<h:outputText value="#{relationBean.relationName}" />
</h:column>
<h:column>
<f:facet name="header"> Value</f:facet>
<h:inputText />
</h:column>
<h:column>
<f:facet name="header">language</f:facet>
<h:outputText value="#{lang.languageName}" />
</h:column>
<h:column>
<f:facet name="header"> Delete</f:facet>
<h:commandButton styleClass="remove_icon" value="Delete" >
</h:commandButton>
</h:column>