Проблема с разбиением на страницы Javascript

Question

Я пытаюсь создать нумерацию страниц. Я получаю данные с доски вакансий codepen, и я хотел бы показать только первые 5 работ, а затем разбить на страницы остальные с шагом в пять. Так что в теории я хотел бы установить jobs.length = 5 и настроить прослушиватель событий, который бы разбивал на страницы объект. Я пробовал так много вещей и не могу понять это. Вот ее ссылка на кодовый блок, над которым я тоже работаю, если поможет! https://codepen.io/Brushel/pen/eKvadr?editors=1010 Вот мой код:

// Grad the elements and the json
const div = document.getElementById('jobs'),
      url = "https://codepen.io/jobs.json";

fetch(url)
.then((response) => {return response.json();})
.then(data => {
  let jobs = data.jobs;
  let jobsLengthTitle = document.querySelector(".job-length");
  
  if(jobs.length === 0) {
    jobsLengthTitle.innerHTML = "Sorry no jobs to show right now";
  } else {
    jobsLengthTitle.innerHTML = `<h3>There are ${jobs.length} availible jobs right now.</h3>`;
  }
  
  
  const page = document.querySelectorAll(".pagination > a");
  page.forEach(page => {
    page.addEventListener("click", (e) => {
      e.preventDefault();
      console.log(page);
    });
  });
  
  jobs.forEach(job => {
    let output = '<div class="container">';
    
    function truncateString(myString, limit) {
      const shortened = myString.indexOf(' ', limit);
      if (shortened == -1) return myString;
      return myString.substring(0, shortened) + `<a class="read-more" href="${job.url}" target="_blank"> Read More ...</a>`;
  }
    jobs.forEach(job => {
      output += `
        <div class="card">
          <div class="card-inner">
            <h1>${job.company_name}</h1>
            <span>${job.featured_text}</span>
            <p>${job.title}</p>
            <p>${job.remote}</p>
            <div class="term"> ${job.term}</div>
            <p class="space-b-sm">${truncateString(job.description, 550)}</p>
            <a class="btn btn-main" href=${job.url} target="_blank">Apply Now</a>
          </div>
        </div>
      `
    });
    
    if(job.remote === true) {
      job.remote = "Location: Remote";
    } else {
      job.remote = "";
    }
     document.getElementById('jobs').innerHTML = output;   
  })
})
.catch(error => console.log(error));

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5 {
  font-family: 'Playfair Display', serif;
}

p, span, a {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
}

body {
  margin: 0 auto;
  padding: 10px;
}

p {
  padding-bottom: .3em;
}

span {
  padding-bottom: .3em;
}

h2 {
  text-transform: uppercase;
  margin-bottom: .5em;
}

.space-b-sm {
  margin-bottom: 1em;
}

.btn {
  background: #ccc;
  padding: 1em 3em;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .3px;
  transition: 1s;
}
.btn.btn-main {
  background: #2EC4B6;
  color: white;
}
.btn.btn-main:hover {
  background: #249b90;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.hero {
  position: relative;
}
.hero img {
  width: 100%;
}
.hero .hero-text {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: white;
}

.card {
  width: 100%;
  margin-bottom: 3em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  padding: 3em;
  border-bottom: 5px solid #2EC4B6;
}
.card .card-inner {
  margin-left: auto;
  margin-right: auto;
}

.read-more {
  color: #2EC4B6;
  text-decoration: none;
  transition: 1s;
}
.read-more:hover {
  color: #249b90;
}

.title-fancy {
  position: relative;
  text-align: center;
}
.title-fancy:after {
  display: block;
  content: "";
  width: 100%;
  height: .1em;
  background: #2EC4B6;
  position: absolute;
  bottom: -5px;
}

.pagination {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

.pagination a.active {
  background-color: #2EC4B6;
  color: white;
}

@media (max-width: 1000px) {
  h2 {
    font-size: 1em;
  }

  .card {
    padding: 3em 1em;
  }
  .card .card-inner {
    width: 100%;
    max-width: 100%;
  }
}

<body>
  <div class='container'>
    <h1 class="job-length"></h1>
    <div id='jobs'></div>
    <div class="pagination">
      <a class="active" href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
    </div>
  </div>
</body>