title: client-side javascript-jquery pagination with previous and next feature
body: <p>I have created a simple JavaScript-jQuery pagination its working fine but the next and previous function i don't know to create that function to display next and previous items. </p>
  
  <p>Assuming we have fixed container that contains multiple div items with fixed with and height. the container have 33 items but will only show 10 items for pagination. </p>
  
  <p>on-browser load all items are added with class <code>hideme</code> so all items are hidden with <code>display: none</code> then the jquery script will removeClass <code>hideme</code> to the first 10 items and creates pagination buttons. For our example we have 33 items so we create 4 pagination buttons and each pagination buttons finds 10 items to next 10 items (and remaining items) once clicked. </p>
  
  <p>So far i have come up with my script for pagination below:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;ul class="items"&gt;
      &lt;li&gt;item 1&lt;/li&gt;
      &lt;li&gt;item 2&lt;/li&gt;
      &lt;li&gt;item 3&lt;/li&gt;
      &lt;li&gt;item 4&lt;/li&gt;
      &lt;li&gt;item 5&lt;/li&gt;
      &lt;li&gt;item 6&lt;/li&gt;
      &lt;li&gt;item 7&lt;/li&gt;
      &lt;li&gt;item 8&lt;/li&gt;
      &lt;li&gt;item 9&lt;/li&gt;
      &lt;li&gt;item 10&lt;/li&gt;
      &lt;li&gt;item 11&lt;/li&gt;
      &lt;li&gt;item 12&lt;/li&gt;
      &lt;li&gt;item 13&lt;/li&gt;
      &lt;li&gt;item 14&lt;/li&gt;
      &lt;li&gt;item 15&lt;/li&gt;
      &lt;li&gt;item 16&lt;/li&gt;
      &lt;li&gt;item 17&lt;/li&gt;
      &lt;li&gt;item 18&lt;/li&gt;
      &lt;li&gt;item 19&lt;/li&gt;
      &lt;li&gt;item 20&lt;/li&gt;
      &lt;li&gt;item 21&lt;/li&gt;
      &lt;li&gt;item 22&lt;/li&gt;
      &lt;li&gt;item 23&lt;/li&gt;
      &lt;li&gt;item 24&lt;/li&gt;
      &lt;li&gt;item 25&lt;/li&gt;
      &lt;li&gt;item 26&lt;/li&gt;
      &lt;li&gt;item 27&lt;/li&gt;
      &lt;li&gt;item 28&lt;/li&gt;
      &lt;li&gt;item 29&lt;/li&gt;
      &lt;li&gt;item 30&lt;/li&gt;
      &lt;li&gt;item 31&lt;/li&gt;
      &lt;li&gt;item 32&lt;/li&gt;
      &lt;li&gt;item 33&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="pagination_wrapper"&gt;
    &lt;div class="pagination"&gt;
      &lt;div class="previous button"&gt;Previous&lt;/div&gt;
      &lt;!-- insert pagination buttons here --&gt;
      &lt;div class="next button insertbeforer"&gt;Next&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>$(document).ready(function() {
    // count number of items
    var count_items = $(".items li").length;
  
    // divide items by 10
    var separate_items = count_items / 10;
  
    // create empty variable
    var page_division = "";
  
    // check separate_items if contains decimal if true add additional pagination
    if (separate_items % 1 != 0) {
      page_division = separate_items + 1;
      console.log(page_division);
    } else {
      page_division = separate_items;
      console.log(page_division);
    }
  
    // iterate then generate links for each items pagination
    for (var items_pagination = 1; items_pagination &lt; page_division; items_pagination++) {
      $(".pagination .insertbeforer").before("&lt;div class='button page" + items_pagination + "'&gt;" + items_pagination + "&lt;/div&gt;");
    };
  
    // hide all items
    $('.items li').addClass('hideme');
  
    // display first 10 items
    $.each($('.items li'), function(index, value) {
      if (index &lt;= 9) {
        $(this).toggleClass('hideme')
      }
    });
  
    // display items from 1-10
    $(".page1").click(function() {
      $('.items li').addClass('hideme');
      for (var item = 1; item &lt; 11; item++) {
        $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
      };
    });
    // display items from 11-20
    $(".page2").click(function() {
      $('.items li').addClass('hideme');
      for (var item = 11; item &lt; 21; item++) {
        $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
      };
    });
    // display items from 21-30
    $(".page3").click(function() {
      $('.items li').addClass('hideme');
      for (var item = 21; item &lt; 31; item++) {
        $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
      };
    });
    // display items from 31-33
    $(".page4").click(function() {
      $('.items li').addClass('hideme');
      for (var item = 31; item &lt; 41; item++) {
        $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
      };
    });
  
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#container{width:420px;height:300px;display:block;overflow:hidden;border:1px solid gray}
  .items{flex-direction:row;display:flex;flex-wrap:wrap}
  .items li{list-style:none;display:block;width:60px;height:60px;background:red;margin:5px;color:#fff}
  .pagination_wrapper{width:420px;height:30px;display:block;border:1px solid gray}
  .pagination{margin-left:15%}
  .pagination .button{background:transparent;color:#000;border:transparent;font-weight:700;margin-left:2px;border-radius:3px!important;padding:1px 10px;line-height:1.8em;border:1px solid #535353;display:inline;cursor:pointer}
  .hideme{display:none!important;width:0;height:0}
  </code></pre>
  
  <p>link to working jsfiddle here <a href="https://jsfiddle.net/jsbrianluna/wctnbbvq/17/" rel="nofollow">https://jsfiddle.net/jsbrianluna/wctnbbvq/17/</a></p>