タイムゾーン対応時刻表示切替

<div class="d10-07-02-wrap">
          <div class="d10-07-02-tabs">
            <button type="button" class="d10-07-02-tab is-active" data-city="tokyo">東京</button>
            <button type="button" class="d10-07-02-tab" data-city="ny">ニューヨーク</button>
            <button type="button" class="d10-07-02-tab" data-city="london">ロンドン</button>
          </div>
          <div class="d10-07-02-display">
            <p class="d10-07-02-time" data-tokyo="19:00" data-ny="06:00" data-london="11:00">19:00</p>
            <p class="d10-07-02-date" data-tokyo="7月10日(金)" data-ny="7月9日(木)" data-london="7月10日(金)">7月10日(金)</p>
            <p class="d10-07-02-note">予約日時はご覧の都市時間で表示されます</p>
          </div>
        </div>

.d10-07-02-wrap{width:100%;max-width:260px;}
        .d10-07-02-tabs{display:flex;gap:4px;background:#f0f0f0;padding:4px;border-radius:8px;}
        .d10-07-02-tab{flex:1;border:none;background:transparent;padding:6px 4px;font-size:11px;border-radius:6px;cursor:pointer;color:#666;}
        .d10-07-02-tab.is-active{background:#fff;color:#222;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.15);}
        .d10-07-02-display{text-align:center;margin-top:16px;}
        .d10-07-02-time{font-size:34px;font-weight:700;color:#222;letter-spacing:1px;}
        .d10-07-02-date{font-size:13px;color:#666;margin-top:2px;}
        .d10-07-02-note{font-size:10px;color:#999;margin-top:10px;}

(function(){
          var root = document.querySelector('.d10-07-02');
          var tabs = root.querySelectorAll('.d10-07-02-tab');
          var timeEl = root.querySelector('.d10-07-02-time');
          var dateEl = root.querySelector('.d10-07-02-date');
          tabs.forEach(function(tab){
            tab.addEventListener('click', function(){
              tabs.forEach(function(t){ t.classList.remove('is-active'); });
              tab.classList.add('is-active');
              var city = tab.getAttribute('data-city');
              timeEl.textContent = timeEl.getAttribute('data-' + city);
              dateEl.textContent = dateEl.getAttribute('data-' + city);
            });
          });
        })();