java.lang.IllegalStateException: Component ID already been found in the view

I have been getting this error. I added id's to all the components and also changed the session scope after reading a few other suggestions on stackOverflow.

I am trying to create a collapsible panel which c开发者_StackOverflow社区ontains tabs.

tabbb.xhtml

<cc:implementation>
    <h:panelGroup layout="block" styleClass="collapsiblePanel-header">

        <h:commandButton id="toggleButton"
            action="#{cc.attrs.bean1.togglePanel}"
            styleClass="collapsiblePanel-img"
            image="#{cc.attrs.bean1.collapsed ? '/resources/images/plus.png' : '/resources/images/minus.png'}" />
    </h:panelGroup>
    <h:panelGroup layout="block" rendered="#{cc.attrs.bean1.collapsed}"
        styleClass="collapsiblePanel-img2">
        <cc:renderFacet name="tabs">
            <js:forEach items="#{cc.attrs.bean2.tabBean}">
                <h:outputText>"${cc.attrs.bean2.tabBean}"</h:outputText>
        <li><h:commandLink
                value="#{cc.attrs.bean2.tabBean.description}">
                <f:param name="tabIndex" value="#{cc.attrs.bean2.randomNum}" />
                        <f:ajax event="click" render=":contentForm"
                            listener="#{bean2.handleTabChange}" />
                    </h:commandLink>
                </li>
            </js:forEach>
        </cc:renderFacet>
    </h:panelGroup>
    <cc:insertChildren />
    <h:outputStylesheet library="css" name="components.css" />
</cc:implementation>

using page: tabbedcollapsible.xhtml

<h:body>
<h:form id="testform">
    <h:outputText value="Tabbed collapsible panel test page" />

    <jl:tabbb bean1="${collPanel}" bean2="${tabbBean}">
        <f:facet name="tabs">
            <h:outputText value="This Is Cool" />
        </f:facet>

    </jl:tabbb>
</h:form>
</h:body>

Both the beans collPanel and tabbBean are request scoped.

Also the form does not render the tabs. I am new to JSF and I have been stuck with this for a long time. Thanks.