比較リスト追加でカードがチェック状態に

<div class="d10-13-07-card">
          <span class="d10-13-07-photo"></span>
          <div class="d10-13-07-body">
            <p class="d10-13-07-price">10.5万円</p>
            <p class="d10-13-07-name">アーバンレジデンス502</p>
            <button class="d10-13-07-compare" type="button">
              <span class="d10-13-07-box"></span><span class="d10-13-07-label">比較に追加</span>
            </button>
          </div>
        </div>

.d10-13-07{padding:16px}
        .d10-13-07-card{position:relative;width:100%;max-width:260px;background:#fff;border:2px solid #eef0f3;border-radius:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
        .d10-13-07-card.is-compared{border-color:#2f7fef;box-shadow:0 0 0 3px rgba(47,127,239,.18)}
        .d10-13-07-photo{display:block;height:100px;background:linear-gradient(135deg,#b7c6d9,#6f89a8)}
        .d10-13-07-body{padding:10px 14px 14px}
        .d10-13-07-price{margin:0;font-size:17px;font-weight:800;color:#1f2a37}
        .d10-13-07-name{margin:4px 0 10px;font-size:12px;color:#667}
        .d10-13-07-compare{border:none;background:#f2f6f9;display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:#334;padding:6px 12px;border-radius:999px;cursor:pointer}
        .d10-13-07-box{width:15px;height:15px;border:2px solid #b7c0c7;border-radius:4px;display:inline-block;margin-right:7px;position:relative;transition:background .2s,border-color .2s}
        .d10-13-07-compare.is-on .d10-13-07-box{background:#2f7fef;border-color:#2f7fef}
        .d10-13-07-compare.is-on .d10-13-07-box::after{content:'';position:absolute;left:4px;top:0;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg)}

(function(){
        var root=document.getElementById('item-10-13-07');if(!root)return;
        var card=root.querySelector('.d10-13-07-card');
        var btn=root.querySelector('.d10-13-07-compare');
        var label=root.querySelector('.d10-13-07-label');
        btn.addEventListener('click',function(){
          var on=btn.classList.toggle('is-on');
          card.classList.toggle('is-compared',on);
          label.textContent=on?'比較中':'比較に追加';
        });
      })();