<div class="steps">

  <button>Shop</button>
  <button>Cart</button>
  <button class="active">Shipping</button>
  <button>Checkout</button>
  <button>Thank You</button>

  <div class="message"></div>

</div>

<div class="steps steps-2">

  <button class="active">Shop</button>
  <button>Cart</button>
  <button>Shipping</button>
  <button>Checkout</button>
  <button>Thank You</button>

  <div class="message"></div>

</div>

.steps {
  counter-reset: currentStep 0 remainder 0 totalStep 0;
}

button {
  counter-increment: totalStep;
}
button::before {
  content: "";
  counter-increment: currentStep;
}
button.active ~ button::before {
  // prevents currentStep from being incremented!
  counter-increment: remainder;
}

.message::before {
  content: "Step: " counter(currentStep) " / " counter(totalStep);
}

.steps-2 .message::before {
  content: "Step: " counter(currentStep) " / " counter(totalStep) " ("
    counter(remainder) " to go!)";
}

// JUST FOR DEMO
button {
  border: 0;
  background: #a5d6a7;
  color: black;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-family: inherit;
}
button.active {
  background: #43a047;
}
body {
  font: 110% system-ui;
  background: #eceff1;
  text-align: center;
}
.message {
  padding: 1rem;
  font-size: 2rem;
  font-weight: 900;
}
.steps {
  margin: 0 0 3rem 0;
}

const buttons = document.querySelectorAll("button");

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    let siblings = button.parentNode.querySelectorAll("button");
    siblings.forEach((button) => {
      button.classList.remove("active");
    });
    button.classList.add("active");
  });
});