数量ステッパー

<div class="d10-01-02-box">
          <p class="d10-01-02-label">数量</p>
          <div class="d10-01-02-step">
            <button class="d10-01-02-btn d10-01-02-minus" type="button">−</button>
            <span class="d10-01-02-val">1</span>
            <button class="d10-01-02-btn d10-01-02-plus" type="button">＋</button>
          </div>
          <p class="d10-01-02-sub">小計 <b class="d10-01-02-total">¥2,400</b></p>
        </div>

.d10-01-02{background:#f6f7fb}
        .d10-01-02-box{background:#fff;border-radius:14px;padding:24px 30px;box-shadow:0 8px 24px rgba(30,40,80,.08);text-align:center}
        .d10-01-02-label{margin:0 0 12px;font-size:13px;color:#64748b}
        .d10-01-02-step{display:inline-flex;align-items:center;border:2px solid #e2e8f0;border-radius:12px;overflow:hidden}
        .d10-01-02-btn{width:44px;height:44px;border:none;background:#fff;font-size:22px;color:#4f46e5;cursor:pointer;transition:background .15s}
        .d10-01-02-btn:hover{background:#eef2ff}
        .d10-01-02-btn:disabled{color:#cbd5e1;cursor:not-allowed;background:#f8fafc}
        .d10-01-02-val{width:56px;font-size:20px;font-weight:700;color:#1e293b;display:inline-block}
        .d10-01-02-val.d10-01-02-fade{animation:d212f .3s ease}
        @keyframes d212f{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
        .d10-01-02-sub{margin:14px 0 0;font-size:13px;color:#64748b}
        .d10-01-02-total{color:#4f46e5;font-size:16px}

(function(){
        var root=document.getElementById('item-10-01-02');
        var val=root.querySelector('.d10-01-02-val'),minus=root.querySelector('.d10-01-02-minus'),plus=root.querySelector('.d10-01-02-plus'),total=root.querySelector('.d10-01-02-total');
        var q=1,unit=2400;
        function upd(){
          val.textContent=q;
          val.classList.remove('d10-01-02-fade');void val.offsetWidth;val.classList.add('d10-01-02-fade');
          total.textContent='¥'+(q*unit).toLocaleString('ja-JP');
          minus.disabled=q<=1;
        }
        minus.addEventListener('click',function(){if(q>1){q--;upd();}});
        plus.addEventListener('click',function(){if(q<99){q++;upd();}});
        upd();
      })();