title: "Load More Buttons" not working with two seperate lists ".each" properly?
body: <p>I want to make two load more buttons that load the specific list that they are connected too with <code>id</code> or <code>class</code> or etc. So far my code populates the lists incorrectly for example when i click the <code>view more complete</code>-> <code>reservations_completed</code> button on my page it will load a duplicate of itself on the other <code>list</code>/ <code>.each</code> called <code>reservations_pending</code>. Even with these classes/id's that are suppose to keep them "seperated".</p>
  
  <ul>
  <li>The problem i believe is one of two:</li>
  </ul>
  
  <p>1)  in the http request that it sends, it uses page=2 or whatever so i think both the <code>complete</code> and <code>pending</code> are being set to that page when either button is pressed resulting in that problem happening.</p>
  
  <p>2) another possible problem could be in the <code>js.erb file</code> I could be calling append wrong with the clicks or whatever I have no idea at this point as i tried many combinations of things and have not gotten this to work, my brain needs some help!! </p>
  
  <p>Now if there is another way that is easier or just another way of doing this period please let me know show me the way im learning so much!!!</p>
  
  <p><strong>your_essays.html.erb:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="content-load-more-completed"&gt;
    &lt;%= render 'your_essays_completed', reservations_completed: @reservations_completed %&gt;
     &lt;/div&gt;
  
  &lt;% unless @reservations_completed.current_page == @reservations_completed.total_pages %&gt;
    &lt;div class="view-more-completed" class="center" style="min-width:100%;" &gt;
      &lt;%= link_to('View More', url_for(page_completed: @reservations_completed.current_page + 1), remote: true, class: 'btn btn-back', style: 'min-width:100%;') %&gt;
    &lt;/div&gt;
  &lt;% end %&gt;
  
  
  &lt;div id="content-load-more-expired"&gt;
    &lt;%= render 'your_essays_expired', reservations_expired: @reservations_expired %&gt;
    &lt;/div&gt;
  
    &lt;% unless @reservations_expired.current_page == @reservations_expired.total_pages %&gt;
    &lt;div class="view-more-expired" class="center" style="min-width:100%;" &gt;
      &lt;%= link_to('View More', url_for(page_expired: @reservations_expired.current_page + 1), remote: true, class: 'btn btn-back', style: 'min-width:100%;') %&gt;
    &lt;/div&gt;
  &lt;% end %&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>your_essays.js.erb</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.view-more-completed a').click(function (event) {
  $('#content-load-more-completed').append("&lt;%=j render 'your_essays_completed', reservations_completed: @reservations_completed, format: 'html' %&gt;");
  });
  &lt;% if @reservations_completed.current_page == @reservations_completed.total_pages %&gt;
    $('.view-more-completed').remove();
  &lt;% else %&gt;
    $('.view-more-completed a').attr('href', '&lt;%= url_for(page_completed: @reservations_completed.current_page + 1) %&gt;');
  &lt;% end %&gt;
  
  $('.view-more-expired a').click(function (event) {
  $('#content-load-more-expired').append("&lt;%=j render 'your_essays_expired', reservations_expired: @reservations_expired, format: 'html' %&gt;");
  });
  
  &lt;% if @reservations_expired.current_page == @reservations_expired.total_pages %&gt;
    $('.view-more-expired').remove();
  &lt;% else %&gt;
    $('.view-more-expired a').attr('href', '&lt;%= url_for(page_expired: @reservations_expired.current_page + 1) %&gt;');
  &lt;% end %&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Reservation_controller</strong></p>
  
  <pre class="lang-rails prettyprint-override"><code>def your_essays
  
      user = current_user
    @reservations = user.reservations.where("user_id = ?", current_user.id).where("status = ?", true)
  
    #pending
    @reservations_pending = user.reservations.where("turned_in = ?", false).where("completed = ?", false).where("due_date &gt;= ?", DateTime.now).order(created_at: :desc).page(params[:page_pending]).per_page(3)
  
     @reservations_pending1 = user.reservations.where("turned_in = ?", false).where("completed = ?", false).where("due_date &gt;= ?", DateTime.now).order(created_at: :desc)
  
    #completed
  
    @reservations_completed = user.reservations.where("turned_in = ?", true).where("completed_doc_updated_at &lt;= due_date", true).order(created_at: :desc).page(params[:page_completed]).per_page(3)
    @reservations_completed1 = user.reservations.where("turned_in = ?", true).where("completed_doc_updated_at &lt;= due_date", true).order(created_at: :desc)
    #expired
    @reservations_expired = user.reservations.where("due_date &lt;= ?", DateTime.now).where("turned_in = ?", false).where("completed = ?", false).order(created_at: :desc).page(params[:page_expired]).per_page(3)
    @reservations_expired1 = user.reservations.where("due_date &lt;= ?", DateTime.now).where("turned_in = ?", false).where("completed = ?", false).order(created_at: :desc)
  
  
  end
  </code></pre>
  
  <p><strong>load-more.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//completed
  
  $(function() {
    var content, isLoadingNextPage, lastLoadAt, loadNextPageAt, minTimeBetweenPages, viewMore;
    content = $('#content-load-more-completed');
    viewMore = $('.view-more-completed');
    isLoadingNextPage = false;
    lastLoadAt = null; 
    minTimeBetweenPages = 5000;
    return loadNextPageAt = 1000;
  
  
  var nextPage;
  
  nextPage = function() {
    var isLoadingNextPage, lastLoadAt, url;
    url = viewMore.find('.view-more-completed a').attr('href');
    if (isLoadingNextPage || !url) {
      return;
    }
    
    isLoadingNextPage = true;
    lastLoadAt = new Date();
    return $.ajax({
      url: url,
      method: 'GET',
      dataType: 'script',
      success: function() {
        
        isLoadingNextPage = false;
        return lastLoadAt = new Date();
      }
    });
  };
  
  viewMore.find('.view-more-completed a').click(function(e) {
    nextPage();
    return e.preventDefaults();
  });
  
  
  });
  
  
  
  //expired 
  
  $(function() {
    var content3, isLoadingNextPage3, lastLoadAt3, loadNextPageAt3, minTimeBetweenPages3, viewMore3;
    content3 = $('#content-load-more-expired');
    viewMore3 = $('.view-more-expired');
    isLoadingNextPage3 = false;
    lastLoadAt3 = null; 
    minTimeBetweenPages3 = 5000;
    return loadNextPageAt3 = 1000;
  
  
  var nextPage3;
  
  nextPage3 = function() {
    var isLoadingNextPage3, lastLoadAt3, url3;
    url3 = viewMore3.find('a').attr('href');
    if (isLoadingNextPage3 || !url3) {
      return;
    }
    
    isLoadingNextPage3 = true;
    lastLoadAt3 = new Date();
    return $.ajax({
      url: url3,
      method: 'GET',
      dataType: 'script',
      success: function() {
        
        isLoadingNextPage3 = false;
        return lastLoadAt3 = new Date();
      }
    });
  };
  
  viewMore3.find('a').click(function(e) {
    nextPage3();
    return e.preventDefaults();
  });
  
  
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>If its important to know whats inside my partials for <code>completed</code> and <code>pending</code> then here it is "ill keep it short" the other ones the same just with <code>pending</code>.</p>
  
  <p><strong>_my_essays_completed.html.erb:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;% reservations_completed.each do |reservation| %&gt;
  
  &lt;!-- content right here keepin it short --&gt;
  
  &lt;% end %&gt;</code></pre>
  </div>
  </div>
  </p>