Dark mode inputunu iki yerde kullanmak?

Tayfun Hocanın yayımladığı dark mode tekniğini kullanıyorum...

Kodu iki yerde bir footer bir de headerda çalıştırmak istediğimde önce gelen kod çalışıyor çünkü ortada input var ve aynı idi kullanıyor ikisinin aynı anda select olması gerekiyor...

Nasıl iki yerde de aynı kodu birbirini tetikleyecek şekilde kullanırım?

html tarafı

<label class="mode-control">
    <input id="mode-btn" class="mode-btn" name="mode-btn"
           <?=cookiecheck('mode') == 'dark' ? 'checked' : null ?> type="checkbox">
    <span><img src="/frontend/images/dark.svg" data-toggle="tooltip" data-bs-placement="bottom"
               title="{{ __('general.darkmode')}}"></span>
    <span><img src="/frontend/images/light.svg" data-toggle="tooltip" data-bs-placement="bottom"
               title="{{ __('general.lightmode')}}"></span>
</label>

ve js

// Dark Mode
document.getElementById('mode-btn').addEventListener('click', () => {
    document.body.classList.toggle('dark');
    setCookie('mode', document.body.classList, 99999);
});