キャンセル待ちリスト登録演出

<div class="d10-07-06-wrap">
          <p class="d10-07-06-status">7/15(水) 19:00〜 <b>満席</b></p>
          <button type="button" class="d10-07-06-btn">キャンセル待ちに登録する</button>
          <div class="d10-07-06-done">
            <span class="d10-07-06-check">✓</span>
            <p>キャンセル待ちを受け付けました</p>
            <small>空きが出次第メールでお知らせします</small>
          </div>
        </div>

.d10-07-06-wrap{width:100%;max-width:240px;text-align:center;}
        .d10-07-06-status{font-size:13px;color:#444;margin:0 0 12px;}
        .d10-07-06-status b{color:#d9364f;background:#fdeaea;padding:2px 8px;border-radius:4px;margin-left:4px;}
        .d10-07-06-btn{border:1px solid #2f6fed;background:#fff;color:#2f6fed;padding:8px 16px;border-radius:6px;font-size:12px;cursor:pointer;width:100%;}
        .d10-07-06-btn:hover{background:#eef3ff;}
        .d10-07-06-done{display:none;padding-top:6px;}
        .d10-07-06-wrap.is-registered .d10-07-06-btn{display:none;}
        .d10-07-06-wrap.is-registered .d10-07-06-status{display:none;}
        .d10-07-06-wrap.is-registered .d10-07-06-done{display:block;animation:d596fade .35s ease;}
        .d10-07-06-check{display:inline-flex;width:32px;height:32px;border-radius:50%;background:#1a7a3c;color:#fff;align-items:center;justify-content:center;font-size:16px;margin-bottom:8px;}
        .d10-07-06-done p{font-size:13px;font-weight:600;color:#222;margin:0;}
        .d10-07-06-done small{font-size:10px;color:#999;}
        @keyframes d596fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

(function(){
          var root = document.querySelector('.d10-07-06');
          var wrap = root.querySelector('.d10-07-06-wrap');
          root.querySelector('.d10-07-06-btn').addEventListener('click', function(){
            wrap.classList.add('is-registered');
          });
        })();