Algolia Instantsearch with Multiple Indices and Multiple Pagination Widgets

I have implemented instantsearch.js with 1 search input and multiple indices, and multiple stats/pagination widgets. Everything seems to be working correctly except for the pagination widgets.

Here is a codepen https://codepen.io/flrrrhoffpauir/pen/EEpWre

collections.addWidget(
    instantsearch.widgets.pagination({
        container: '#collections-search-pagination',
        showFirstLast: false,
        labels: {
            next: '>',
            previous: '<',
        },
        cssClasses: {
            root: 'search-pagination'
        }
    })
}

search.addWidget(
    instantsearch.widgets.pagination({
        container: '#stories-search-pagination',
        showFirstLast: false,
        labels: {
            next: '>',
            previous: '<',
        },
        cssClasses: {
            root: 'search-pagination'
        }
    })
}

If you search for ‘martin’ and then click the Stories tab, you can see the results and that the pagination is working. If you now click the Collections tab, you can see that the pagination widget has the correct number of pages based on how many results were returned according to the stats widget, but then you click to go to page 2, you are just scrolled to the top of the page and it doesn’t load the page 2 data.

How can I get two or more pagination widgets on the page at once that both work correctly?

This is what I went off of to create the multiple index search, but they don't cover multiple pagination widgets: https://jsfiddle.net/j9nwpz34/49/

The searchFunction implementation should transfer all the information that needs to be synchronized. For example, in your case you have a pagination widget that you want to sync across instances of InstantSearch, so you want to transfer the pagination property on top of the query parameter.

var search = instantsearch(
{
  /* appId: '',
  apiKey: '', 
  indexName: 'movies',*/
  searchFunction: function(helper) {
    var query = movies.helper.state.query;
    var page = movies.helper.state.page;
    products.helper.setQuery(query);
    products.helper.setPage(page)
    products.helper.search();
    helper.search();
  },
  searchParameters: {
    hitsPerPage: 3
  }
});

I've modified the JSFiddle to match your need. You can learn more about this state by going to the JS Helper documentation (internal state management of InstantSearch.js).

Update based on the jsFiddle provided:

The rest of the example still holds. However, one thing to note is that if you make a modification in the helper, it will reset the page. In the provided fiddle, you do such a change in the collections searchFunction. You will always set the query, which will always reset the page to 0. Hence the bug.

Here is a fixed fiddle