Two toggles for dark mode - one of the toggles not changing when prompt but the function is working

Question

So I am making a dark mode for a shopify. So far everything has worked but I want to have the same toggle in two locations, one for mobile, and one for desktop, since I have a sidebar menu on mobile. I added a forloop.counter on my elements ID="" and For="" so that I could use the same ID twice and everything works fine but the desktop toggle does not change the icon. Instead of going Moon -> Sun it stays a Moon.

Here is my code. I am mostly a front-end web designer using liquid therefore bare with me if my code is not perfect.

Thank you so much for your help!!!!!!

Lola

this is my two toggles

    <div  class="ml-4 whitespace-nowrap toggle-switcher-1" onclick="toggled(this)">
            <input type="checkbox" id="theme_{{forloop.counter}}" class="toggle-input" checked>
                <label for="theme_{{forloop.counter}}" class="inline-block w-8 h-8 align-middle">
                    <img src="CoterieWebSymbols-04.png"  alt="Dark mode" class="toggle-icon">
                </label>
         </div>

    <div  class="ml-4 whitespace-nowrap toggle-switcher-1" onclick="toggled(this)">
            <input type="checkbox" id="theme_{{forloop.counter}}" class="toggle-input" checked>
                <label for="theme_{{forloop.counter}}" class="inline-block w-8 h-8 align-middle">
                    <img src="CoterieWebSymbols-04.png"  alt="Dark mode" class="toggle-icon">
                </label>
         </div>

this is my javascript

<!-- toogle for dark mode -->
<script type="text/javascript">
const page = document.querySelector('body');
const toggle = page.querySelector('.toggle-input');
const toggleIcon = page.querySelector('.toggle-icon');
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");


// set theme and localStorage on page load
setCheckedState();
  

function setCheckedState() {
  // checks if localStorage has a "checked" value set at all
  if (!(localStorage.checked === undefined)) {
    // if it does, it sets the state of the toggle accordingly
    toggle.checked = isTrue(localStorage.getItem('checked'));
    // after setting the toggle state, the theme is adjusted according to the checked state
    toggleTheme();
  }
}

function toggleTheme() {
  // Toggle theme based on state of checkbox
  replaceClass();
  // replace icons on page
  toggleIconTheme();
  // set the value of the "checked" key in localStorage
  updateLocalStorage();
}

function replaceClass() {
  if (toggle.checked) {
    page.classList.replace('light', 'dark');
  } else {
    page.classList.replace('dark', 'light');
  }
}

function toggleIconTheme() {
  // Replace icons not able to be targeted by css variables
  if (page.classList.contains('light')) {
    toggleIcon.src = 'CoterieWebSymbols-04.png';
    toggleIcon.alt = 'Switch to Dark Mode';
  } else  {
    toggleIcon.src = 'CoterieWebSymbols-05.png';
    toggleIcon.alt = 'Switch to Light Mode';
  }
}


function updateLocalStorage() {
  localStorage.setItem('checked', toggle.checked);
}

function isTrue(value) {
  // convert string to boolean
  return value === 'true';
}

// Toggle theme any time the state of the checkbox changes
toggle.addEventListener('change', toggleTheme);
// This code assumes a Light Mode default
  
</script>