jquery - rails infinite scroll repeating contents -

i not sure missing here. have implemented infinite scroll on page, results being repeated more once. created list of items dev envrionment made sequentially. being repeated in infinite scroll eg. item no 49, 48, 47, 46, 45, 44, 46, 45, 44, 46, 45, 44, 43, .....

index.js.erb

   $('#my-posts').append('<%= j render @news %>');    <% if @news.next_page %>    $('.pagination').replacewith('<%= j will_paginate @news %>');     <% else %>    $(window).off('scroll');    $('.pagination').remove();    <% end %> 

index.html.erb

<section class='page-content-container'>  <h2 class='static-page-subheading'>stay date</h2>   <%= render 'news' %>    <div id="infinite-scrolling">     <%= will_paginate @news%>    </div>  </section>  

_news.html.erb

<div id='my-posts'>  <% @news.each |news| %>   <div class='news-item-container'> <h2><%= news.title %></h2>     <h3><%= news.created_at %></h3> <%= truncate(news.body, :length => 500, escape: false) %> <%= link_to 'read more', news %> <div class="addthis_sharing_toolbox"></div>    </div>   <% end %>   </div> 

pagination.js.coffee (ignore indentation here)

 jquery ->    if $('#infinite-scrolling').size() > 0      $(window).on 'scroll', ->        more_news_url = $('.pagination .next_page a').attr('href')         if more_news_url && $(window).scrolltop() > $(document).height() - $(window).height() - 60          $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="loading..." title="loading..." />')          $.getscript more_news_url          return        return 

just replicated locally , remembered fixed somehow , remember. did fix it:

index.html.erb

<%= render partial: "posts" %> <div class="append-me"></div>  <%= will_paginate @posts, class: 'pagination pagination-sm' %> 

index.js.erb

$('.append-me').append( '<%= j render "posts" %>' );   <% if @posts.next_page %>     $('.pagination').replacewith('<%= j will_paginate @posts, class: "pagination pagination-sm" %>'); <% else %>     $('.pagination').remove(); <% end %> 

_posts.html.erb

<% @posts.each |post| %> <div class="well" style="margin: 15% 0%;">     <%= post.data %> </div>  <% end %> 

post.js

if ($('.pagination')) {          $(window).scroll(function() {             console.log("sdasd")             url = $(' .next_page').attr('href');              // console.log($(window).scrolltop())             // console.log($(document).height())             // console.log($(document).height() - $(window).height() - 50)             if (url && $(window).scrolltop() > $(document).height() - $(window).height() - 150) {                  $('.pagination').text("fetching more profiles...");                 $.getscript(url)             }             // $(window).scroll();         });     } 

the trick is, had explicit creating class "pagination" in both index.html , index.js files. secondly, did <%= j render "posts" %> index.js.erb file rather @posts