Untitled

var blackHairList;
  var blondeHairList;
  var brownHairList;
  var numberOfItems;
  const numberPerPage = 9;
  var currentPage = 1;
  const numberOfPages = Math.ceil(numberOfItems / numberPerPage);

  $('#next-pagination-button').click(function (e) {
    if (currentPage === numberOfPages) return;
    currentPage += 1;
    buildPage(currentPage);
  });

  $('#prev-pagination-button').click(function (e) {
    if (currentPage === 1) return;
    currentPage -= 1;
    buildPage(currentPage);
  });

  function getElements() {
    blackHairList = document.querySelectorAll(
      '.hair-collection-wrapper.black .hair-style-container'
    );

    // eslint-disable-next-line prettier/prettier
    blondeHairList = document.querySelectorAll(
      '.hair-collection-wrapper.blonde .hair-style-container'
    );

    brownHairList = document.querySelectorAll(
      '.hair-collection-wrapper.brown .hair-style-container'
    );

    numberOfItems = blackHairList.length;
  }

  function buildPage(currPage) {
    getElements();
    const trimStart = (currPage - 1) * numberPerPage;
    const trimEnd = trimStart + numberPerPage;
    // will need to do this for each colour
    var blackElems = Array.prototype.slice.call(blackHairList, trimStart, trimEnd);
    var blondeElems = Array.prototype.slice.call(blondeHairList, trimStart, trimEnd);
    var brownElems = Array.prototype.slice.call(brownHairList, trimStart, trimEnd);

    // // Prev button diabled if current page is 1
    // if (currPage === 1) {
    //   $('#prev-pagination-button').addClass('disable-click');
    // }

    // // Next button disabled if current page == number of pages
    // if (currPage === numberOfPages) {
    //   $('#next-pagination-button').attr('disabled', 'disabled');
    // }

    // hide all
    [].forEach.call(blackHairList, function (item) {
      item.style.display = 'none';
    });

    [].forEach.call(blondeHairList, function (item) {
      item.style.display = 'none';
    });

    [].forEach.call(brownHairList, function (item) {
      item.style.display = 'none';
    });

    // show selected 9
    [].forEach.call(blackElems, function (item) {
      item.style.display = 'block';
    });

    [].forEach.call(blondeElems, function (item) {
      item.style.display = 'block';
    });

    [].forEach.call(brownElems, function (item) {
      item.style.display = 'block';
    });
  }