役に立った投票付きフィードバック欄

<div class="d06-11-12-wrap">
          <div class="d06-11-12-row">
            <span class="d06-11-12-label">この記事は役に立ちましたか?</span>
          </div>
          <div class="d06-11-12-btns">
            <button class="d06-11-12-vote" type="button" data-v="up"><svg viewBox="0 0 24 24" width="14" height="14"><path d="M12 4l8 9h-5v7H9v-7H4z"/></svg><span class="d06-11-12-count">12</span></button>
            <button class="d06-11-12-vote" type="button" data-v="down"><svg viewBox="0 0 24 24" width="14" height="14"><path d="M12 20l-8-9h5V4h6v7h5z"/></svg><span class="d06-11-12-count">1</span></button>
          </div>
          <p class="d06-11-12-thanks">投票ありがとうございます!</p>
        </div>

.d06-11-12-wrap{width:100%;max-width:240px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
        .d06-11-12-label{font-size:12px;font-weight:700;color:#374151}
        .d06-11-12-btns{display:flex;gap:10px}
        .d06-11-12-vote{display:flex;align-items:center;gap:5px;border:1px solid #e5e7eb;background:#fff;color:#6b7280;border-radius:999px;padding:6px 14px;font-size:12px;cursor:pointer;transition:border-color .2s,color .2s}
        .d06-11-12-vote svg{fill:currentColor}
        .d06-11-12-vote.d06-11-12-picked{border-color:#6366f1;color:#6366f1}
        .d06-11-12-thanks{margin:0;font-size:11px;color:#22c55e;font-weight:700;opacity:0;transition:opacity .3s ease;height:14px}
        .d06-11-12-thanks.d06-11-12-show{opacity:1}

(function(){
          var root = document.querySelector('.d06-11-12');
          var buttons = root.querySelectorAll('.d06-11-12-vote');
          var thanks = root.querySelector('.d06-11-12-thanks');
          var voted = false;
          buttons.forEach(function(btn){
            btn.addEventListener('click', function(){
              if(voted){ return; }
              voted = true;
              var countEl = btn.querySelector('.d06-11-12-count');
              countEl.textContent = (parseInt(countEl.textContent, 10) || 0) + 1;
              btn.classList.add('d06-11-12-picked');
              buttons.forEach(function(b){ if(b !== btn){ b.style.opacity = '.5'; } });
              thanks.classList.add('d06-11-12-show');
            });
          });
        })();