並び替えで再配置されるコメント欄

<div class="d06-11-08-wrap">
          <div class="d06-11-08-tabs">
            <button class="d06-11-08-tab d06-11-08-active" type="button" data-sort="new">新着順</button>
            <button class="d06-11-08-tab" type="button" data-sort="pop">人気順</button>
          </div>
          <ul class="d06-11-08-list">
            <li data-likes="2" data-order="1"><span class="d06-11-08-name">あい</span><p>いいね記事!</p><span class="d06-11-08-likes">♥ 2</span></li>
            <li data-likes="8" data-order="2"><span class="d06-11-08-name">だいき</span><p>すごく勉強になりました</p><span class="d06-11-08-likes">♥ 8</span></li>
            <li data-likes="1" data-order="3"><span class="d06-11-08-name">ゆま</span><p>次も期待してます</p><span class="d06-11-08-likes">♥ 1</span></li>
            <li data-likes="5" data-order="4"><span class="d06-11-08-name">こうた</span><p>共感します</p><span class="d06-11-08-likes">♥ 5</span></li>
          </ul>
        </div>

.d06-11-08-wrap{width:100%;max-width:260px;display:flex;flex-direction:column;gap:8px}
        .d06-11-08-tabs{display:flex;gap:6px}
        .d06-11-08-tab{border:1px solid #e5e7eb;background:#fff;color:#6b7280;font-size:11px;font-weight:700;border-radius:999px;padding:5px 12px;cursor:pointer}
        .d06-11-08-tab.d06-11-08-active{background:#6366f1;border-color:#6366f1;color:#fff}
        .d06-11-08-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:150px;overflow-y:auto}
        .d06-11-08-list li{background:#f8fafc;border-radius:8px;padding:6px 10px;display:flex;flex-direction:column}
        .d06-11-08-list li.d06-11-08-move{animation:d1308swap .35s ease}
        @keyframes d1308swap{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
        .d06-11-08-name{font-size:11px;font-weight:700;color:#374151}
        .d06-11-08-list p{margin:2px 0;font-size:12px;color:#4b5563}
        .d06-11-08-likes{font-size:10px;color:#f43f5e;align-self:flex-end}

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-11-08');
          var tabs = root.querySelectorAll('.d06-11-08-tab');
          var list = root.querySelector('.d06-11-08-list');
          tabs.forEach(function(tab){
            tab.addEventListener('click', function(){
              tabs.forEach(function(t){ t.classList.remove('d06-11-08-active'); });
              tab.classList.add('d06-11-08-active');
              var mode = tab.getAttribute('data-sort');
              var items = Array.prototype.slice.call(list.children);
              items.sort(function(a, b){
                if(mode === 'pop'){
                  return parseInt(b.getAttribute('data-likes'), 10) - parseInt(a.getAttribute('data-likes'), 10);
                }
                return parseInt(a.getAttribute('data-order'), 10) - parseInt(b.getAttribute('data-order'), 10);
              });
              items.forEach(function(li){
                li.classList.remove('d06-11-08-move');
                void li.offsetWidth;
                li.classList.add('d06-11-08-move');
                list.appendChild(li);
              });
            });
          });
        })();