お届け日程選択(配送オプション)

<div class="d10-01-12-box">
          <p class="d10-01-12-label">お届け日を選択</p>
          <div class="d10-01-12-opts">
            <button class="d10-01-12-opt d10-01-12-on" type="button" data-p="0">通常便<br><b>7/13(月)</b></button>
            <button class="d10-01-12-opt" type="button" data-p="300">お急ぎ便<br><b>7/12(日)</b></button>
            <button class="d10-01-12-opt" type="button" data-p="0">日時指定<br><b>選択する</b></button>
          </div>
          <p class="d10-01-12-fee">追加料金: <b class="d10-01-12-feeval">¥0</b></p>
        </div>

.d10-01-12{background:#f6f7fb}
        .d10-01-12-box{width:260px;background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 8px 24px rgba(30,40,80,.08)}
        .d10-01-12-label{margin:0 0 12px;font-size:12px;color:#64748b;font-weight:600}
        .d10-01-12-opts{display:flex;gap:8px}
        .d10-01-12-opt{flex:1;border:2px solid #e2e8f0;border-radius:10px;background:#fff;padding:9px 4px;font-size:11px;color:#475569;text-align:center;line-height:1.6;cursor:pointer;transition:all .15s}
        .d10-01-12-opt b{display:block;font-size:11.5px;margin-top:2px}
        .d10-01-12-opt:hover{border-color:#a5b4fc}
        .d10-01-12-opt.d10-01-12-on{border-color:#4f46e5;background:#eef2ff;color:#4f46e5}
        .d10-01-12-fee{margin:14px 0 0;font-size:12px;color:#64748b;text-align:center}
        .d10-01-12-feeval{color:#4f46e5;font-size:15px}

(function(){
        var root=document.getElementById('item-10-01-12');if(!root)return;
        var opts=root.querySelectorAll('.d10-01-12-opt'),fee=root.querySelector('.d10-01-12-feeval');
        opts.forEach(function(b){
          b.addEventListener('click',function(){
            opts.forEach(function(x){x.classList.remove('d10-01-12-on');});
            b.classList.add('d10-01-12-on');
            fee.textContent='¥'+(+b.dataset.p).toLocaleString('ja-JP');
          });
        });
      })();