Why child template not renders after new data loaded?

help
1

I am trying to achieve infinite scrolling it works okay until i render parent by manually , but i need to achieve reactivity when scrolled to bottom .How to achieve this ?

Scrolling code in Template.icons.onRendered :

$(function(){   
 function onSelectScroll(event) {
    var st = $(selectObj).scrollTop();
    var loadedItems = $(selectObj[0]).find('li').length;
    var curSHeight = event.currentTarget.scrollHeight;
    var curSTop = event.currentTarget.scrollTop;
    var curHeight = $(event.currentTarget).height();
    console.log("csH: " + curSHeight + " csT: "+curSTop + " cH: "+ curHeight + " len:"+loadedItems);
    //downscroll 
    if((curSHeight - 50 <= curSTop + curHeight)){
      if (st > lastScrollTop && loadedItems-1 === Session.get("iconsLimit")) {
        currentPageNo++;
        Session.set("iconsLimit",Session.get("iconsLimit") + 20);
        console.log("current Page " + currentPageNo);
        isDataAvailable = false;
        self.noIconsRender.set(self.noIconsRender.get()-1);
      }
      else {
        // upscroll code
      }
      lastScrollTop = st;
    }
  }
}); // self invoking function end

Child template :

 <template name="icons">
  <i class="material-icons"> <span class="iconsclass">{{this.icon}}</span></i>
  <select class="iconsSelect" id="icons" name="icon">
     <option value="tab"  data-id="tab"> {{this.icon}} </option> 
    {{#each icons}} 
      <option value="{{this.icon}}" data-id={{this.icon}}><i class="material-icons">{{this.icon}}</i></option> 
    {{/each}}
  </select>
   <!--{{#if moreResults}}
    <div id="showMoreResults" style="background-color: red;margin-left: 25px;">  <span class="loading">Loading...</span> </div>
    {{/if}} -->
2

Okay , no problem with meteor but materialize_select issue , when i reinitialize materialize_select , it closes the open select window , how to stay open and scroll normally .