html

<ul class="counter-buttons">
  <li class="counter-trigger" data-target="140">トリガー１</li>
  <li class="counter-trigger" data-target="2458">トリガー２</li>
  <li class="counter-trigger" data-target="19820">トリガー３</li>
</ul>

<ol class="counter">
  <li class="counter-slot">
    <div class="counter-box">
      <span class="counter-num"></span>
      <span class="counter-num">0</span>
      <span class="counter-num">1</span>
      <span class="counter-num">2</span>
      <span class="counter-num">3</span>
      <span class="counter-num">4</span>
      <span class="counter-num">5</span>
      <span class="counter-num">6</span>
      <span class="counter-num">7</span>
      <span class="counter-num">8</span>
      <span class="counter-num">9</span>
    </div>
  </li>
  <li class="counter-slot">
    <div class="counter-box">
      <span class="counter-num"></span>
      <span class="counter-num">0</span>
      <span class="counter-num">1</span>
      <span class="counter-num">2</span>
      <span class="counter-num">3</span>
      <span class="counter-num">4</span>
      <span class="counter-num">5</span>
      <span class="counter-num">6</span>
      <span class="counter-num">7</span>
      <span class="counter-num">8</span>
      <span class="counter-num">9</span>
    </div>
  </li>
  <li class="counter-slot">
    <div class="counter-box">
      <span class="counter-num"></span>
      <span class="counter-num">0</span>
      <span class="counter-num">1</span>
      <span class="counter-num">2</span>
      <span class="counter-num">3</span>
      <span class="counter-num">4</span>
      <span class="counter-num">5</span>
      <span class="counter-num">6</span>
      <span class="counter-num">7</span>
      <span class="counter-num">8</span>
      <span class="counter-num">9</span>
    </div>
  </li>
  <li class="counter-slot">
    <div class="counter-box">
      <span class="counter-num"></span>
      <span class="counter-num">0</span>
      <span class="counter-num">1</span>
      <span class="counter-num">2</span>
      <span class="counter-num">3</span>
      <span class="counter-num">4</span>
      <span class="counter-num">5</span>
      <span class="counter-num">6</span>
      <span class="counter-num">7</span>
      <span class="counter-num">8</span>
      <span class="counter-num">9</span>
    </div>
  </li>
  <li class="counter-slot">
    <div class="counter-box">
      <span class="counter-num"></span>
      <span class="counter-num">0</span>
      <span class="counter-num">1</span>
      <span class="counter-num">2</span>
      <span class="counter-num">3</span>
      <span class="counter-num">4</span>
      <span class="counter-num">5</span>
      <span class="counter-num">6</span>
      <span class="counter-num">7</span>
      <span class="counter-num">8</span>
      <span class="counter-num">9</span>
    </div>
  </li>
</ol>

JavaScript

const counterTrigger = document.querySelectorAll(".counter-trigger");
const counterSlots = document.querySelectorAll(".counter-slot");
const counterSlotsLength = counterSlots.length;
// translateYに算出する数値を宣言
let translateAmount;

counterTrigger.forEach(function (elem, index) {
  elem.addEventListener("click", function () {
    // data属性に設定されたゴールの数値を取得
    const targetNum = elem.dataset.target;
    // 取得した数値を１文字ずつ配列に格納
    const splitNum = targetNum.split("");
    // 生成した配列の長さを取得
    const splitNumLength = splitNum.length;

    // ゴールの数値が<li>の総数(桁数の上限)以下かどうか判定
    if (splitNumLength <= counterSlotsLength) {
      // 桁数の上限 - ゴールの数値の桁数
      const addDigits = counterSlotsLength - splitNumLength;
      // 差分の桁数をゴールの数値が格納された配列の先頭に空白文字として追加
      for (let i = 0; i < addDigits; i++) {
        splitNum.unshift("");
      }
    }
    // <li>の数だけループ開始
    counterSlots.forEach(function (elem2, index2) {
      // 各々の<li>の子要素の<span>を全て取得
      const counterNum = elem2.querySelectorAll(".counter-num");
      // <li>のループの中で<span>の数だけループを開始
      counterNum.forEach(function (elem3, index3) {
        // translateYに渡すpxの基準となる要素の高さを取得
        const countHeight = elem3.clientHeight;
        // <span>に記述された数字を取得
        const countText = elem3.textContent;
        // ループ中の<span>に記述された数字と、ゴールの数値が格納された配列の<li>の数だけループ番目が一致する場合を判定
        if (countText === splitNum[index2]) {
          // 判定に一致した<span>の番目と要素の高さを乗算した数値をtranslateYに出力
          transitionAmount = index3 * countHeight;
          elem3.closest(".counter-box").style.transform = `translateY(-${transitionAmount}px)`;
        }
      });
    });
  });
});

scss

.counter {
  display: flex;
  .counter-slot {
    overflow-y: hidden;
    height: 40px;
    .counter-box {
      transition: 0.6s;
      .counter-num {
        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
        background-color: #eee;
      }
    }
  }
}