Get Uncaught TypeError: Cannot read property 'setQuery' of null

I dont know why I get this exception did it like this fiddle https://jsfiddle.net/hen395y0/ for mutliple indices. Someone has an idea? Another question is this code clean and the way it should be for multiple indices?

Updated html templates + javascript

    <div id="articles-hits-container">
        <script type="text/html" id="article-hit-template">
          <div class="hit">
            <div class="head">
              <span class="title">@{{_highlightResult.title.value}}</span>
              <span class="tag">@{{_highlightResult.category.value}}</span>
            </div>
            <div class="details">
              <span>@{{article_votes.value}} Points</span> &middot;
              <span>@{{username}}</span> &middot;
              <span>@{{created_at}}</span>
              <span class="domain">@{{_highlightResult.link.value}}</span>
            </div>
          </div>
        </script>
      </div>
      <div id="comments-hits-container">
        <script type="text/html" id="comment-hit-template">
          <div class="hit">
            <div class="head">
              <span class="title">@{{_highlightResult.title.value}}</span>
            </div>
            <div class="details">
              <span>@{{comment_votes.value}} Points</span> &middot;
              <span>@{{username}}</span> &middot;
              <span>@{{created_at}}</span>
            </div>
            <div class="text">@{{_highlightResult.body.value}}</div>
          </div>
        </script>
      </div>
      <div id=pagination-container>

var articles = instantsearch({
	appId: 'T65ZIP3BPM',
  apiKey: '85a24b87b1e5620a9bd99f4fa24212bb',
  indexName: 'articles',
  searchFunction: function(helper) {
    var query = articles.helper.state.query;
    comments.helper.setQuery(query);
    comments.helper.search();
    helper.search();
  },
  searchParameters: {
    hitsPerPage: 20
  }
});

var comments = instantsearch({
	appId: 'T65ZIP3BPM',
  apiKey: '85a24b87b1e5620a9bd99f4fa24212bb',
  indexName: 'comments',
  searchParameters: {
    hitsPerPage: 20
  }
});

var search = instantsearch({
  appId: 'T65ZIP3BPM',
  apiKey: '85a24b87b1e5620a9bd99f4fa24212bb',
  indexName: 'articles',
  searchParameters: {
    hitsPerPage: 20
  }
});

var searchBox = instantsearch.widgets.searchBox({
  container: document.querySelector('#search-box'),
  placeholder: 'Search for Articles or Comments'
})

var articlesHits = instantsearch.widgets.hits({
	container: document.querySelector('#articles-hits-container'),
  templates: {
    item: document.getElementById('article-hit-template').innerHTML,
    empty: "No"
  }
});

var commentsHits = instantsearch.widgets.hits({
	container: document.querySelector('#comments-hits-container'),
  templates: {
    item: document.getElementById('comment-hit-template').innerHTML,
    empty: "No"
  }
});

var pagination =  instantsearch.widgets.pagination({
    container: '#pagination-container',
    maxPages: 20,
    scrollTo: false,
    showFirstLast: false,
})

search.addWidget(
  instantsearch.widgets.sortBySelector({
    container: '#sort-by-indices',
    indices: [
      {
        name: 'articles',
        label: 'Articles',
      },
      {
        name: 'comments',
        label: 'Comments',
      },
    ],
  })
);

var stats = instantsearch.widgets.stats({
    container: '#stats-container'
})

var numericSelector = instantsearch.widgets.numericSelector({
 container: '#date',
  attributeName: 'created_at_timestamp',
  operator: '>=',
  options: [
    {label: 'All time', value: 0 },
    {label: 'Last 24h', value: (Math.round(new Date()/1000) - 86400)},
    {label: 'Week', value: (Math.round(new Date()/1000) - 604800)},
    {label: 'Month', value: (Math.round(new Date()/1000) - 2592000)},
    {label: 'Year', value: (Math.round(new Date()/1000) - 31536000)},
  ]
})


articles.addWidget(articlesHits);
comments.addWidget(commentsHits);
articles.addWidget(searchBox);
articles.addWidget(pagination);
comments.addWidget(pagination);
articles.addWidget(stats);
comments.addWidget(stats);
articles.addWidget(numericSelector);
comments.addWidget(numericSelector);
comments.start();
articles.start();
search.start();

best regards

Got this to work had to create two different html templates, but I cant use my widgets properly so to be specific cant switch between comments and articles with my selector… Something is wrong here do I need helper function for this?

Do you want to query multiple indices at the same time or to switch between two indices?

Switch between two indices. Did it like so for now but want to know if that’s the way to go?

<script>
const search = instantsearch({
  appId: 'T65ZIP3BPM',
  apiKey: '85a24b87b1e5620a9bd99f4fa24212bb',
  indexName: 'articles',
  routing: true
});

search.addWidget(
   instantsearch.widgets.searchBox({
     container: '#search-box',
     placeholder: 'Search for Articles or Comments'
   })
);

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits-container',
    templates: {
      item:function(data) {
        if(data.category === undefined) {
          return    '<div class="hit">' +
                      '<div class="head">' +
                        '<span class="title">' + data._highlightResult.title.value + '</span>' +
                      '</div>' +
                      '<div class="details">' +
                        '<span>' + '<a href=/comment/' + data.id + '>' + data.comment_votes + ' ' + 'points </a></span> &middot; ' +
                        '<span>' + '<a href=/user/' + data.username + '>' + data.username + '</a>' + '</span> &middot; ' +
                        '<span>' + data.created_at + '</span>' +
                      '</div>' +
                      '<p class="text">' + data._highlightResult.body.value + '</p>' +
                    '</div>'
        } else {
          return    '<div class="hit">' +
                      '<div class="head">' +
                        '<span class="title">' + '<a href=' + data._highlightResult.link.value + '>' + data._highlightResult.title.value + '</a>' + '</span>' +
                        '<span class="tag">' + data._highlightResult.category.value + '</span>' +
                      '</div>' +
                      '<div class="details">' +
                        '<span>' + '<a href=/article/' + data.id + '>' + data.article_votes + ' ' + 'points </a></span> &middot; ' +
                        '<span>' + '<a href=/user/' + data.username + '>' + data.username + '</a>' + '</span> &middot; ' +
                        '<span>' + data.created_at + '</span>' +
                        '<span class="domain">' + data._highlightResult.link.value + '</span>' +
                      '</div>' +
                    '</div>'
        }
      }
    }
  })
);

search.addWidget(
  instantsearch.widgets.pagination({
    container: '#pagination-container',
    maxPages: 20,
    // default is to scroll to 'body', here we disable this behavior
    scrollTo: false,
    showFirstLast: false,
  })
);

search.addWidget(
  instantsearch.widgets.sortBySelector({
    container: '#sort-by-indices',
    indices: [
      {
        name: 'articles',
        label: 'Articles',
      },
      {
        name: 'comments',
        label: 'Comments',
      },
    ],
  })
);

search.addWidget(
  instantsearch.widgets.stats({
    container: '#stats-container'
  })
);

search.addWidget(
  instantsearch.widgets.numericSelector({
   container: '#date',
    attributeName: 'created_at_timestamp',
    operator: '>=',
    options: [
      {label: 'All time', value: 0 },
      {label: 'Last 24h', value: (Math.round(new Date()/1000) - 86400)},
      {label: 'Week', value: (Math.round(new Date()/1000) - 604800)},
      {label: 'Month', value: (Math.round(new Date()/1000) - 2592000)},
      {label: 'Year', value: (Math.round(new Date()/1000) - 31536000)},
    ]
  })
);

search.start();
</script>