いいねで弾むコメントリアクション

<ul class="d06-11-03-list">
          <li class="d06-11-03-item">
            <span class="d06-11-03-avatar" style="background:linear-gradient(135deg,#3b82f6,#06b6d4)">S</span>
            <div class="d06-11-03-body">
              <span class="d06-11-03-name">さやか</span>
              <p>とても参考になりました!</p>
              <button class="d06-11-03-like" type="button"><svg viewBox="0 0 24 24" width="14" height="14"><path d="M12 21s-7.5-4.6-10-9.1C0.5 8.5 2 5 5.5 5c2 0 3.5 1.2 4.5 2.6C11 6.2 12.5 5 14.5 5 18 5 19.5 8.5 18 11.9 15.5 16.4 12 21 12 21z"/></svg><span class="d06-11-03-count">3</span></button>
            </div>
          </li>
          <li class="d06-11-03-item">
            <span class="d06-11-03-avatar" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">Y</span>
            <div class="d06-11-03-body">
              <span class="d06-11-03-name">ゆうと</span>
              <p>次回も楽しみです。</p>
              <button class="d06-11-03-like" type="button"><svg viewBox="0 0 24 24" width="14" height="14"><path d="M12 21s-7.5-4.6-10-9.1C0.5 8.5 2 5 5.5 5c2 0 3.5 1.2 4.5 2.6C11 6.2 12.5 5 14.5 5 18 5 19.5 8.5 18 11.9 15.5 16.4 12 21 12 21z"/></svg><span class="d06-11-03-count">1</span></button>
            </div>
          </li>
        </ul>

.d06-11-03-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;width:100%;max-width:260px}
        .d06-11-03-item{display:flex;gap:8px}
        .d06-11-03-avatar{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}
        .d06-11-03-body{flex:1}
        .d06-11-03-name{display:block;font-size:11px;font-weight:700;color:#374151}
        .d06-11-03-body>p{margin:2px 0 4px;font-size:12px;color:#4b5563}
        .d06-11-03-like{display:inline-flex;align-items:center;gap:4px;border:none;background:none;color:#9ca3af;font-size:11px;cursor:pointer;padding:2px 0}
        .d06-11-03-like svg{fill:currentColor}
        .d06-11-03-like.d06-11-03-liked{color:#f43f5e}
        .d06-11-03-like.d06-11-03-bump svg{animation:d1303pop .4s ease}
        @keyframes d1303pop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}

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