title: next and prev button functionality with pagination
body: <p>I want to add to my pagination the next and prev button functionality so i can also move the pages through them. in my code i only manage to display the next or prev page and see the content from the second page on click but without also moving the selected number of the button from 1 to 2, or the next page if there are more and so on. same for the prev. also, if i cannot go next/prev i want to have the next/prev button disabled.</p>
  <p>any help with this, please?</p>
  <p>here is what i have till now:</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>window.onload = function(){
  
  var data = {
    "headings": {
      "propBook": "Book",
      "propAuthor": "Author",
      "propYear": "Year",
    },
    "items": [{
        "fields": {
          "propBook": "The Great Gatsby",
          "propAuthor": "F Scott Fitzgerald",
          "propYear": "1925",
        },
        "button": {
          "name": "View book",
          "propURL": "https://google.com"
        }
      },
      {
        "fields": {
          "propBook": "The Grapes of Wrath",
          "propAuthor": "John Steinbeck",
          "propYear": "1939",
        },
        "button": {
          "name": "View book",
          "propURL": ""
        }
      },
      {
        "fields": {
          "propBook": "A Wild Sheep Chase",
          "propAuthor": "Haruki Murakami",
          "propYear": "1982",
        },
        "button": {
          "name": "View book",
          "propURL": "https://google.com"
        }
      }
    ]
  }
  
  
  const HEADINGS = data.headings;
  const ITEMS = data.items;
  const TABLE_WRAPPER = document.querySelector('.book-component .table-wrapper');
  const TABLE = document.createElement('table');
  TABLE.setAttribute('class', 'pagination');
    TABLE.setAttribute('data-pagecount', 2);
  TABLE_WRAPPER.appendChild(TABLE);
  
  
  for (const field in data) {
    const TABLE_ROW = document.createElement('tr');
    TABLE_ROW.setAttribute('id', 'myRow');
  
    if (field == 'headings') {
      for (const child in HEADINGS) {
        const HEADER_CELL = document.createElement('th');
        TABLE_ROW.appendChild(HEADER_CELL);
        HEADER_CELL.setAttribute('class', 'sort-cta');
        HEADER_CELL.innerText = HEADINGS[child];
        TABLE.appendChild(TABLE_ROW);
      }
    } else if (field == 'items') {
      for (const child in ITEMS) {
        const TABLE_ROW = document.createElement('tr');
        let item = ITEMS[child].fields;
        let btn = ITEMS[child].button;      
  
        for (const row in item) {
          const TABLE_DATA = document.createElement('td');
          TABLE_ROW.appendChild(TABLE_DATA);
          TABLE_DATA.innerText = item[row];
          TABLE.appendChild(TABLE_ROW);       
        }
        
        
        if (btn.propURL !== '') {
          let link = document.createElement('a');
          link.setAttribute('href', btn.propURL);
          link.innerHTML = btn.name;
          x = TABLE_ROW.insertCell(-1);
          x.appendChild(link);
        } else {
          let link = document.createElement('span');
          link.innerHTML = 'Reserved';
          x = TABLE_ROW.insertCell(-1);
          x.appendChild(link);
        }
      }
    }
  }
  
    let perPage = 10;
    function genTables() {
      let tables = document.querySelectorAll('.pagination');
      tables.forEach((table) =&gt; {
        perPage = parseInt(table.dataset.pagecount);
        createFooters(table);
        createTableMeta(table);
        loadTable(table);
      });
    }
    // based on current page, only show the elements in that range
    function loadTable(table) {
      let startIndex = 0;
      if (table.querySelector('th')) startIndex = 1;
      const START = parseInt(table.dataset.currentpage) * table.dataset.pagecount + startIndex;
      const END = START + parseInt(table.dataset.pagecount);
      const TABLE_ROWS = table.rows;
      for (var x = startIndex; x &lt; TABLE_ROWS.length; x++) {
        if (x &lt; START || x &gt;= END) TABLE_ROWS[x].classList.add('inactive');
        else TABLE_ROWS[x].classList.remove('inactive');
      }
    }
  
    function createTableMeta(table) {
      table.dataset.currentpage = '0';
    }
  
    function createFooters(table) {
      const COUTING_WRAPPER = document.createElement('div');
      COUTING_WRAPPER.setAttribute('class', 'counting-wrapper');
      const COUNTING_MSG = document.createElement('p');
      COUTING_WRAPPER.appendChild(COUNTING_MSG);
      let TABLE_WRAP = document.querySelector('.table-wrapper');
      TABLE_WRAP.appendChild(COUTING_WRAPPER);
  
      let hasHeader = false;
      if (table.querySelector('th')) hasHeader = true;
      let ROWS = table.rows.length;
      if (hasHeader) ROWS = ROWS - 1;
      let NUM_PAGES = ROWS / perPage;
      let pager = document.createElement('div');
      // add an extra page
      if (NUM_PAGES % 1 &gt; 0) NUM_PAGES = Math.floor(NUM_PAGES) + 1;
      pager.className = 'pager';
      let nextPage = document.createElement('button');
      nextPage.innerHTML = 'next';
      nextPage.className = 'item';
      let prevPage = document.createElement('button');
      prevPage.innerHTML = 'prev';
      prevPage.className = 'item';
      pager.appendChild(prevPage);
      pager.appendChild(nextPage);
  
  
      nextPage.addEventListener('click', () =&gt; {
        table.dataset.currentpage = parseInt(table.dataset.currentpage) + 1;
        loadTable(table);
      });
  
      prevPage.addEventListener('click', () =&gt; {
        table.dataset.currentpage = parseInt(table.dataset.currentpage) - 1;
        loadTable(table);
      })
  
      for (var i = 0; i &lt; NUM_PAGES; i++) {
        var page = document.createElement('button');
        page.innerHTML = i + 1;
        page.className = 'pager-item';
        page.dataset.index = i;
        if (i == 0) page.classList.add('selected');
        
  
        page.addEventListener('click', function () {
          var items = pager.querySelectorAll('.pager-item');
          for (var x = 0; x &lt; items.length; x++) {
            items[x].classList.remove('selected');
          }
          this.classList.add('selected');
          table.dataset.currentpage = this.dataset.index;
          loadTable(table);
  
         
        });
        pager.appendChild(page);
      }
  
      // insert page at the top of the table
      table.parentNode.insertBefore(pager, table);
    }
    genTables();
  
  
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>tr.inactive {
    display: none;
  }
  
  .table-wrapper {
    display: flex;
    flex-direction: column-reverse;
  }
  
  .pager {
    display: flex;
    justify-content: center;
    padding: 0;
    margin-top: 10px;
    font-weight: 800;
  }
  
  .pager-item.selected {
    outline: none;
    border-color: #0077cc;
    background: #0077cc;
    color: #fff;
    cursor: default;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="book-component"&gt;
    &lt;div class="table-wrapper"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>