"Next" Arrow Disappearing Too Early in Carousel

I need to create a slideshow/carousel that shows multiple divs (only containing text) per "slide." I used this as a starting base, and went from there. I managed to make this, but unfortunately the "next" arrow that is supposed to slide further along seems to only be able to be used once before disappearing, even though there's at least one, possibly two more slides that need to happen before reaching the end. Each of the divs are set to have auto width, though when I set a defined width, such as 240px, it allows me to do an extra scroll, though it still isn't enough to get me to the end.

const prev = document.querySelector(".prev");
const next = document.querySelector(".next");
const carousel = document.querySelector(".inner-carousel");
const track = document.querySelector(".track");
let width = carousel.offsetWidth;
let index = 0;
window.addEventListener("resize", function () {
  width = carousel.offsetWidth;
});
next.addEventListener("click", function (e) {
  e.preventDefault();
  index = index + 1;
  prev.classList.add("show");
  track.style.transform = "translateX(" + index * -width + "px)";
  if (track.offsetWidth - index * width < index * width) {
    next.classList.add("hide");
  }
});
prev.addEventListener("click", function () {
  index = index - 1;
  next.classList.remove("hide");
  if (index === 0) {
    prev.classList.remove("show");
  }
  track.style.transform = "translateX(" + index * -width + "px)";
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
}
.carousel-container {
  width: 1100px;
  margin: 50px auto;
  position: relative;
}
@media (max-width: 768px) {
  .carousel-container {
    width: 95%;
  }
}
.inner-carousel {
  width: 100%;
  height: 35px;
  overflow: hidden;
}
.track {
  display: inline-flex;
  height: 100%;
  transition: transform 0.2s ease-in-out;
}
.card-container {
  width: auto;
  height: 35px;
  flex-shrink: 0;
  padding: 10px 20px;
}
.card-container:nth-of-type(1n + 2) {
  border-left: 1px solid #d3d3d3;
}
@media (max-width: 768px) {
  .card-container {
    width: 184px;
  }
}
.card {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat',sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-align: center;
}
.card a {
  text-decoration: none;
  color: #848484;
  transition: 0.35s;
}
.card a:hover {
  color: #DB3545;
}

.nav button {
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  border: none;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
  background: #ffffff;
  font-weight: 900;
  color: #333333;
  transition: 0.35s;
}
.nav button:hover {
  color: #DB3545;
}
.nav .prev {
  left: -30px;
  display: none;
}
.nav .prev.show {
  display: block;
}
.nav .next {
  right: -30px;
}
.nav .next.hide {
  display: none;
}

<div class="carousel-container">
  <div class="inner-carousel">
    <div class="track">
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 1/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 2/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 3/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 4/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 5/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 6/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 7/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 8/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 9/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 10/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 11/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 12/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 13/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 14/15</a></div>
      </div>
      <div class="card-container">
        <div class="card"><a href="#">Lorem Ipsum 15/15</a></div>
      </div>
    </div>
    <div class="nav">
      <button class="prev">&#8249;</button>
      <button class="next">&#8250;</button>
    </div>
  </div>
</div>

Please let me know if there is anything that seems wrong. Any help would be greatly appreciated. Thank you very much!

Solution

Try this in your next.Click():

if (track.offsetWidth - index * width < 0) { next.classList.add("hide"); }

You were hiding it too early.