セレクトチップ(複数選択)

<div class="d03-02-06-box">
          <div class="d03-02-06-head"><span>興味のある分野</span><span class="d03-02-06-badge">0</span></div>
          <div class="d03-02-06-chips">
            <button class="d03-02-06-chip">Web制作</button>
            <button class="d03-02-06-chip">SEO</button>
            <button class="d03-02-06-chip">ライティング</button>
            <button class="d03-02-06-chip">デザイン</button>
            <button class="d03-02-06-chip">EC構築</button>
            <button class="d03-02-06-chip">運用保守</button>
            <button class="d03-02-06-chip">広告運用</button>
          </div>
        </div>

.d03-02-06-box{width:100%;max-width:320px;margin:0 auto}
        .d03-02-06-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:700;color:#334155;font-size:14px}
        .d03-02-06-badge{min-width:24px;height:24px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;background:#e2e8f0;color:#64748b;border-radius:12px;font-size:12px;transition:background .2s,color .2s}
        .d03-02-06-badge.on{background:#4f46e5;color:#fff}
        .d03-02-06-chips{display:flex;flex-wrap:wrap;gap:8px}
        .d03-02-06-chip{padding:8px 14px;border:1.5px solid #d1d5db;background:#fff;color:#475569;border-radius:20px;font-size:13px;cursor:pointer;transition:all .18s}
        .d03-02-06-chip:hover{border-color:#a5b4fc}
        .d03-02-06-chip.sel{background:#4f46e5;border-color:#4f46e5;color:#fff}

(function(){
        var root=document.getElementById('item-03-02-06');
        var chips=root.querySelectorAll('.d03-02-06-chip');
        var badge=root.querySelector('.d03-02-06-badge');
        [].forEach.call(chips,function(c){
          c.addEventListener('click',function(){
            c.classList.toggle('sel');
            var n=root.querySelectorAll('.d03-02-06-chip.sel').length;
            badge.textContent=n;
            badge.classList.toggle('on',n>0);
          });
        });
      })();