Multiselect not working inside ui:repeat

Question

I am trying to implement multi-select box for each entry inside ui:repeat. I tried initializing it on document.ready and inside ui:repeat. It is being applied to the top first row only.

    <ui:repeat id="repeat" value="#{bean.list}" var="item" varStatus="status"><h:form id="supervisorCircleForm">
                                                                    <p:dataTable id="supervisor_table" var="pass"
                                                                                 value="#{bean.insideList}">
                                                                        <p:column headerText="Name" styleClass="center">
                                                                            <h:outputText value="#{pass.memberName}"/>
                                                                        </p:column>
                                                                        <p:column headerText="Companies"
                                                                                  styleClass="center">
                                                                            <select id="taxiCircle" multiple="multiple">
                                                                                <c:forEach var="item"
                                                                                           items="${bean.companyList}">
                                                                                    <option value="${item.value}">${item.label}</option>
                                                                                </c:forEach>
                                                                            </select>
<script type="text/javascript">
                                                                                            (function(){
                                                                                                $('#taxiCircle').multiselect();
                                                                                                console.log("Func Called");
                                                                                            })();
                                                                                        </script>                                                                        </p:column>
                                                                    </p:dataTable>
                                                                </h:form>
</ui:repeat>

The initialise part is being called every time but the select box appears only once. I tried calling it in document.ready too.

Answer 1

1. Remove your script tag from ui:repeat as it is not required to be repeated and move it after closing body.

2. You need to use unique id for your elements always. If not then change it class instead.

       <ui:repeat id="repeat" value="#{bean.list}" var="item" varStatus="status"><h:form id="supervisorCircleForm">
            <p:dataTable id="supervisor_table" var="pass" value="#{bean.insideList}">
                <p:column headerText="Name" styleClass="center">
                   <h:outputText value="#{pass.memberName}"/>
                </p:column>
                <p:column headerText="Companies" styleClass="center">
                   <select class="taxiCircle" multiple="multiple">
                      <c:forEach var="item" items="${bean.companyList}">
                          <option value="${item.value}">${item.label}  </option>                 
                      </c:forEach>
                   </select>
                </p:column>
            </p:dataTable>
         </h:form>
       </ui:repeat>
       <script type="text/javascript">
           (function(){
             $('.taxiCircle').multiselect();
              console.log("Func Called");
             })();
       </script>