クリックで選ぶ5段階評価アンケート

<div class="d04-14-06-wrap">
          <span class="d04-14-06-label">サポート対応の評価</span>
          <div class="d04-14-06-stars">
            <button type="button" class="d04-14-06-star" data-v="1">★</button>
            <button type="button" class="d04-14-06-star" data-v="2">★</button>
            <button type="button" class="d04-14-06-star" data-v="3">★</button>
            <button type="button" class="d04-14-06-star" data-v="4">★</button>
            <button type="button" class="d04-14-06-star" data-v="5">★</button>
          </div>
          <span class="d04-14-06-txt">評価を選択してください</span>
        </div>

.d04-14-06-wrap{width:min(280px,100%);text-align:center}
        .d04-14-06-label{display:block;margin:0 0 12px;font-size:12px;color:#8a93a3}
        .d04-14-06-stars{display:flex;justify-content:center;gap:6px}
        .d04-14-06-star{
          font-size:26px;line-height:1;color:#e4e8ef;background:none;border:none;cursor:pointer;
          transition:color .15s,transform .15s;
        }
        .d04-14-06-star:hover{transform:scale(1.15)}
        .d04-14-06-star.is-on{color:#f5a623}
        .d04-14-06-txt{display:block;margin-top:10px;font-size:12px;color:#8a93a3}

(function(){
        var wrap=document.querySelector('.d04-14-06-wrap');
        if(!wrap)return;
        var stars=Array.prototype.slice.call(wrap.querySelectorAll('.d04-14-06-star'));
        var txt=wrap.querySelector('.d04-14-06-txt');
        var labels=['','とても不満','不満','普通','満足','とても満足'];
        stars.forEach(function(s){
          s.addEventListener('click',function(){
            var v=parseInt(s.getAttribute('data-v'),10);
            stars.forEach(function(o){
              o.classList.toggle('is-on',parseInt(o.getAttribute('data-v'),10)<=v);
            });
            txt.textContent=labels[v];
          });
        });
      })();