title: java.lang.IllegalStateException: Component ID has already been found in the view
body: <p>I am getting the "java.lang.IllegalStateException: Component ID  has already been found in the view" exception under certain circumstances and I do not understand why.</p>
  
  <p>I have the following page where I am using a composite component four times, and there is a corresponding output text used to display the result of each:</p>
  
  <pre><code>&lt;h:form id="aCrazyTestForm""&gt;
  
     &lt;my:jqueryautocomplete values="#{jqueryAutoCompleteBean.carListJson}" selectedValue="#{jqueryAutoCompleteBean.selectedCarOne}" field="make"&gt;
                  &lt;f:ajax execute=":aCrazyTestForm:completeOne" render=":aCrazyTestForm:completeOne" event="tagSelectedEvent" listener="#{jqueryAutoCompleteBean.selectedCarOne}" /&gt;
              &lt;/my:jqueryautocomplete&gt;
  
              &lt;h:outputText id="completeOne" value="#{jqueryAutoCompleteBean.selectedCarOne}" /&gt;
  
              &lt;my:jqueryautocomplete values="#{jqueryAutoCompleteBean.carListJson}" selectedValue="#{jqueryAutoCompleteBean.selectedCarTwo}" field="make"&gt;
                  &lt;f:ajax execute=":aCrazyTestForm:completeTwo" render=":aCrazyTestForm:completeTwo" event="tagSelectedEvent" listener="#{jqueryAutoCompleteBean.selectedCarTwo}" /&gt;
              &lt;/my:jqueryautocomplete&gt;
  
              &lt;h:outputText id="completeTwo" value="#{jqueryAutoCompleteBean.selectedCarTwo}" /&gt;
  
              &lt;my:jqueryautocomplete values="#{jqueryAutoCompleteBean.carListJson}" selectedValue="#{jqueryAutoCompleteBean.selectedCarThree}" field="make"&gt;
                  &lt;f:ajax  execute=":aCrazyTestForm:completeThree" render=":aCrazyTestForm:completeThree" event="tagSelectedEvent" listener="#{jqueryAutoCompleteBean.selectedCarThree}" /&gt;
              &lt;/my:jqueryautocomplete&gt;
  
              &lt;h:outputText id="completeThree" value="#{jqueryAutoCompleteBean.selectedCarThree}" /&gt;
  
              &lt;my:jqueryautocomplete values="#{jqueryAutoCompleteBean.carListJson}" selectedValue="#{jqueryAutoCompleteBean.selectedCarFour}" field="make"&gt;
                  &lt;f:ajax  execute=":aCrazyTestForm:completeFour" render=":aCrazyTestForm:completeFour" event="tagSelectedEvent" listener="#{jqueryAutoCompleteBean.selectedCarFour}" /&gt;
              &lt;/my:jqueryautocomplete&gt;
  
              &lt;h:outputText id="completeFour" value="#{jqueryAutoCompleteBean.selectedCarFour}" /&gt;
  
  &lt;/h:form&gt;
  </code></pre>
  
  <p>My composite component implementation is wrapped in a span with id = "#{cc.clientId}"</p>
  
  <p>I only encounter this error if I populate the form's id.If I set the form prependId="false", then I do not get the error.</p>
  
  <p>With the below code I get the error:
  "Unhandled Faces error: Component ID aCrazyTestForm:j_idt15 has already been found in the view". In the following snippet you can see that this is actually the id of my custom component.</p>
  
  <pre><code>&lt;JqueryAutoComplete id="j_idt15" immediate="false" inView="true" localValueSet="false" rendered="true" required="false" transient="false" valid="true"&gt;
  </code></pre>
  
  <p>I thought that wrapping the composite component's implementation in a span with id="#{cc.clientId}" ensures that my component gets a unique identifier wherever it is used?</p>