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>