順番にポップする星レーティング

<div class="d08-09-12-rating" role="radiogroup" aria-label="満足度を星で評価">
          <button class="d08-09-12-star" type="button" role="radio" aria-checked="false" aria-label="1つ星" data-val="1">★</button>
          <button class="d08-09-12-star" type="button" role="radio" aria-checked="false" aria-label="2つ星" data-val="2">★</button>
          <button class="d08-09-12-star" type="button" role="radio" aria-checked="false" aria-label="3つ星" data-val="3">★</button>
          <button class="d08-09-12-star" type="button" role="radio" aria-checked="false" aria-label="4つ星" data-val="4">★</button>
          <button class="d08-09-12-star" type="button" role="radio" aria-checked="false" aria-label="5つ星" data-val="5">★</button>
        </div>
        <p class="d08-09-12-msg">星をクリックして評価</p>

.d08-09-12-rating{display:flex;gap:6px}
        .d08-09-12-star{background:none;border:none;font-size:30px;line-height:1;color:#d8dae2;cursor:pointer;padding:2px;transition:color .15s}
        .d08-09-12-star.is-on{color:#ffb020}
        .d08-09-12-star.is-pop{animation:d08-09-12-pop .4s cubic-bezier(.3,1.8,.4,1)}
        @keyframes d08-09-12-pop{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}
        .d08-09-12-msg{margin:10px 0 0;font-size:12px;font-weight:600;color:#8a8f9c;text-align:center}

(function(){
        var root=document.getElementById('item-08-09-12');if(!root)return;
        var stars=[].slice.call(root.querySelectorAll('.d08-09-12-star'));
        var msg=root.querySelector('.d08-09-12-msg');
        if(!stars.length||!msg)return;
        var labels={1:'いまいち',2:'ふつう',3:'まあまあ',4:'良い',5:'最高！'};
        stars.forEach(function(star){
          star.addEventListener('click',function(){
            var val=Number(star.getAttribute('data-val'));
            stars.forEach(function(s,i){
              var on=i<val;
              s.classList.toggle('is-on',on);
              s.setAttribute('aria-checked',i===val-1?'true':'false');
              if(on){
                (function(s,delay){
                  setTimeout(function(){
                    s.classList.remove('is-pop');void s.offsetWidth;s.classList.add('is-pop');
                  },delay);
                })(s,i*40);
              } else {
                s.classList.remove('is-pop');
              }
            });
            msg.textContent=labels[val]+'（'+val+'/5）';
          });
        });
      })();