定期予約(繰り返し)設定UI

<div class="d10-07-08-wrap">
          <p class="d10-07-08-title">繰り返しパターン</p>
          <div class="d10-07-08-chips">
            <button type="button" class="d10-07-08-chip is-active">毎週月曜</button>
            <button type="button" class="d10-07-08-chip">毎週水曜</button>
            <button type="button" class="d10-07-08-chip is-active">毎週金曜</button>
            <button type="button" class="d10-07-08-chip">隔週</button>
            <button type="button" class="d10-07-08-chip">毎月1日</button>
          </div>
          <p class="d10-07-08-summary">選択中: <span class="d10-07-08-summary-text">月・金</span></p>
        </div>

.d10-07-08-wrap{width:100%;max-width:260px;}
        .d10-07-08-title{font-size:12px;font-weight:600;color:#444;margin:0 0 8px;}
        .d10-07-08-chips{display:flex;flex-wrap:wrap;gap:6px;}
        .d10-07-08-chip{border:1px solid #ddd;background:#fff;padding:6px 12px;border-radius:999px;font-size:11px;color:#555;cursor:pointer;}
        .d10-07-08-chip.is-active{background:#2f6fed;border-color:#2f6fed;color:#fff;}
        .d10-07-08-summary{font-size:11px;color:#888;margin-top:12px;}
        .d10-07-08-summary-text{color:#2f6fed;font-weight:600;}

(function(){
          var root = document.querySelector('.d10-07-08');
          var map = { '毎週月曜':'月', '毎週水曜':'水', '毎週金曜':'金', '隔週':'隔週', '毎月1日':'毎月1日' };
          var summary = root.querySelector('.d10-07-08-summary-text');
          function update(){
            var chips = root.querySelectorAll('.d10-07-08-chip.is-active');
            var labels = [];
            chips.forEach(function(c){ labels.push(map[c.textContent]); });
            summary.textContent = labels.length ? labels.join('・') : 'なし';
          }
          root.querySelectorAll('.d10-07-08-chip').forEach(function(chip){
            chip.addEventListener('click', function(){
              chip.classList.toggle('is-active');
              update();
            });
          });
        })();