Two paginations not working independently in one page - JSF, Primefaces

Question

I have one web page where there is 2 tables with paginations in each tables. It makes a problem when I click the pagination. For ex., If I select second page of second table then first table automatically changed with 2nd page. Do you guys have any suggestion? So, here is my code:

<div class="col s6">
                <div class="row">
                    <h:form id="dataTable">
                        <p:dataTable var="pilihCabang" rows="5"
                            value="#{cabangView.cabangs}"
                            style="width: 100%; float: left; margin-top: 0px;"
                            paginator="true" pageLinks="5" rowsPerPageTemplate="5,10,15"
                            widgetVar="widgetWorkOrder" rowIndexVar="rowIndex"
                            paginatorPosition="bottom" emptyMessage="No record found"
                            styleClass="no-dtbl-header" id="pilToko"
                            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
                            <p:columnGroup type="header">
                                <p:column headerText="Toko" />
                            </p:columnGroup>
                            <p:column>
                                <h:outputText value="#{pilihCabang.nama}" />
                                <p:commandLink style="float:right">
                                    <p:graphicImage name="delete.png" library="images" width="25px" height="25px"/>
                                </p:commandLink>
                            </p:column>
                        </p:dataTable>
                    </h:form>
                </div>
            </div>
            <div class="col s6">
                <div class="row">
                    <h:form id="dataTabledua">
                        <p:dataTable var="pilihProduk" rows="5"
                            value="#{produkView.produks}"
                            style="width: 100%; float: left; margin-top: 0px;"
                            paginator="true" pageLinks="5" rowsPerPageTemplate="5,10,15"
                            widgetVar="widgetWorkOrder" rowIndexVar="rowIndex"
                            paginatorPosition="bottom" emptyMessage="No record found"
                            styleClass="no-dtbl-header" id="pilPro"
                            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
                            <p:columnGroup type="header">
                                <p:column headerText="Produk" />
                            </p:columnGroup>
                            <p:column>
                                <h:outputText value="#{pilihProduk.nama}" />
                                <p:commandLink style="float:right">
                                    <p:graphicImage name="delete.png" library="images" width="25px" height="25px"/>
                                </p:commandLink>
                            </p:column>
                        </p:dataTable>
                    </h:form>
                </div>
            </div>

Answer 1

This is caused by both datatables having the same widgetVar. Change one and you will be fine.