I have a main HTML page which includes detail.xhtml and duo.xhtml.
Now duo.xhtml also includes detail.xhtml, which results in duplicate IDs which of course it not working. What can I do to solve this problem? I don't want to manage redundant code.
Main:
<ui:composition ...>
  <ui:define name="center">
    <ui:insert name="insertDuo">
      <ui:include src="/includes/duo.xhtml" />
    </ui:insert>
...
<p:dialog header="x" widgetVar="detDialog" id="dlg" modal="true" appendTo="@(body)">
  <ui:insert name="insertDetail">
    <ui:include src="/includes/detail.xhtml" />
  </ui:insert>
Duo:
<ui:composition>
    <p:dialog header="y" widgetVar="newDuoDialog" id="newDuoDlg" modal="true" >
        <p:layout id="layout">
            <p:layoutUnit position="west">
                <ui:insert name="insertDetailStmt">
                    <h:form id="stmtDetailForm">
                        <ui:include src="/includes/detail.xhtml" />
                    </h:form>
                </ui:insert>
            </p:layoutUnit>
Detail:
<p:accordionPanel id="accordion">
Reference to components:
<p:commandButton value="z" update=":accordion:duoDlgForm2:pickList"/>