選択数カウンター付きチェックリスト

<div class="d04-14-04-wrap">
          <span class="d04-14-04-label">興味のある分野を選択</span>
          <div class="d04-14-04-opts">
            <button type="button" class="d04-14-04-opt">デザイン</button>
            <button type="button" class="d04-14-04-opt">開発</button>
            <button type="button" class="d04-14-04-opt">マーケ</button>
            <button type="button" class="d04-14-04-opt">営業</button>
          </div>
          <span class="d04-14-04-counter"><b class="d04-14-04-n">0</b> 件選択中</span>
        </div>

.d04-14-04-wrap{width:min(280px,100%)}
        .d04-14-04-label{display:block;margin:0 0 10px;font-size:12px;color:#8a93a3}
        .d04-14-04-opts{display:flex;flex-wrap:wrap;gap:8px}
        .d04-14-04-opt{
          padding:8px 14px;font-size:12.5px;font-weight:700;color:#444;
          background:#fff;border:2px solid #d5d9e0;border-radius:99px;cursor:pointer;
          transition:border-color .2s,background .2s,color .2s;
        }
        .d04-14-04-opt.is-active{border-color:#4a6cf7;background:#4a6cf7;color:#fff}
        .d04-14-04-counter{display:block;margin-top:14px;font-size:12px;color:#8a93a3}
        .d04-14-04-n{color:#4a6cf7;font-size:15px;transition:transform .2s}
        .d04-14-04-n.is-pop{transform:scale(1.4)}

(function(){
        var wrap=document.querySelector('.d04-14-04-wrap');
        if(!wrap)return;
        var opts=wrap.querySelectorAll('.d04-14-04-opt');
        var n=wrap.querySelector('.d04-14-04-n');
        var count=0;
        opts.forEach(function(o){
          o.addEventListener('click',function(){
            o.classList.toggle('is-active');
            count+=o.classList.contains('is-active')?1:-1;
            n.textContent=count;
            n.classList.remove('is-pop');
            void n.offsetWidth;
            n.classList.add('is-pop');
          });
        });
      })();