絵文字リアクション選択バー

<div class="d06-11-05-wrap">
          <div class="d06-11-05-comment">
            <span class="d06-11-05-name">はると</span>
            <p>ついに公開されましたね!</p>
          </div>
          <div class="d06-11-05-bar">
            <button class="d06-11-05-emoji" type="button"><span class="d06-11-05-e">👍</span><span class="d06-11-05-c">2</span></button>
            <button class="d06-11-05-emoji" type="button"><span class="d06-11-05-e">🎉</span><span class="d06-11-05-c">0</span></button>
            <button class="d06-11-05-emoji" type="button"><span class="d06-11-05-e">❤️</span><span class="d06-11-05-c">1</span></button>
            <button class="d06-11-05-emoji" type="button"><span class="d06-11-05-e">😮</span><span class="d06-11-05-c">0</span></button>
          </div>
        </div>

.d06-11-05-wrap{width:100%;max-width:260px;display:flex;flex-direction:column;gap:10px}
        .d06-11-05-comment p{margin:2px 0 0;font-size:12px;color:#4b5563}
        .d06-11-05-name{font-size:11px;font-weight:700;color:#374151}
        .d06-11-05-bar{display:flex;gap:6px;flex-wrap:wrap}
        .d06-11-05-emoji{display:flex;align-items:center;gap:4px;border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:4px 9px;font-size:12px;cursor:pointer;transition:border-color .2s,background .2s}
        .d06-11-05-emoji.d06-11-05-active{border-color:#6366f1;background:#eef2ff}
        .d06-11-05-emoji.d06-11-05-pop .d06-11-05-e{animation:d1305pop .35s ease}
        @keyframes d1305pop{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
        .d06-11-05-c{font-size:11px;color:#6b7280;font-weight:700}

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-11-05');
          var buttons = root.querySelectorAll('.d06-11-05-emoji');
          buttons.forEach(function(btn){
            var countEl = btn.querySelector('.d06-11-05-c');
            var active = false;
            btn.addEventListener('click', function(){
              active = !active;
              var count = parseInt(countEl.textContent, 10) || 0;
              count += active ? 1 : -1;
              countEl.textContent = count;
              btn.classList.toggle('d06-11-05-active', active);
              btn.classList.remove('d06-11-05-pop');
              void btn.offsetWidth;
              btn.classList.add('d06-11-05-pop');
            });
          });
        })();