title: Adding class to each element with an ID in foreach loop
body: <p>Hello :) I'm coding dark mode switch and I came across a problem I can't figure out.</p>
  <p>I loop through an array which contains items looking like that: <code>{ className: 'h3dark', elementId: 'h2'}</code>. Then I use forEach loop to apply each class to <strong>ALL</strong> elements with a defined ID. Unfortunately it's applying each class on only first html element with an ID. Do you know how it can be fixed?</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;h1 id=&quot;h1&quot; class=&quot;h1&quot;&gt;COLOR&lt;/h1&gt;   &lt;!--Color changed--&gt;
  &lt;h1 id=&quot;h2&quot; class=&quot;h1&quot;&gt;COLOR&lt;/h1&gt;   &lt;!--Color changed--&gt;
  &lt;h1 id=&quot;h3&quot; class=&quot;h1&quot;&gt;COLOR&lt;/h1&gt;   &lt;!--Color changed--&gt;
  &lt;h1 id=&quot;h1&quot; class=&quot;h1&quot;&gt;COLOR&lt;/h1&gt;   &lt;!--Color not changed--&gt;
  &lt;h1 id=&quot;h2&quot; class=&quot;h1&quot;&gt;COLOR&lt;/h1&gt;   &lt;!--Color not changed--&gt;
  &lt;h1 id=&quot;h3&quot; class=&quot;h1&quot;&gt;COLOR&lt;/h1&gt;   &lt;!--Color not changed--&gt;
      
  &lt;button onclick=&quot;darkSwitch()&quot;&gt;CHANGE COLOR&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p><strong>JAVASCRIPT</strong></p>
  <pre><code>// checking if cookie exists
  var cookieState = Cookies.get('darkMode');
  
  // First visit - cookieState is undefined
  // If cookie exists we are parsing it to get a boolean
  if(cookieState === undefined) {
    var isDarkmodeEnabled = false;
  } else {
    var isDarkmodeEnabled = JSON.parse(cookieState)
  };
  
  // Cookie doesn't exist: darkMode = false 
  // Cookie exists: darkMode = true/false
  var darkMode = isDarkmodeEnabled;
  
  // Add dark mode classes and elements' ids
  // className - a name of a class with dark mode attributes 
  // elementId - an id of an element a class will be added to
  var darkClasses = [
    { className: 'h1dark', elementId: 'h1'},
    { className: 'h2dark', elementId: 'h3'},
    { className: 'h3dark', elementId: 'h2'},           
  ];
  
  
  // Adding classes on page load if darkmode is enabled
  window.onload = addClassesOnLoad();
  
  // Changing darkMode state and adding or removing classes
  function darkSwitch() {
  
    // Setting darkMode to its opposite value
    darkMode = !darkMode;
  
    if(darkMode === true) {
      // Looping through an array and deleting classes
      darkClasses.forEach(item =&gt; {
          document.getElementById(item.elementId).classList.add(item.className)
      });
    } else {
    // Looping through an array and deleting classes
      darkClasses.forEach(item =&gt; {
        document.getElementById(item.elementId).classList.remove(item.className)
      });  
    };
    // Saving darkMode state to the cookie
    Cookies.set('darkMode', darkMode);
  }
  
  // Adding classes on page load if darkmode is enabled
  function addClassesOnLoad() {
  
    if(darkMode === true){
              
      darkClasses.forEach(item =&gt;{ 
                  document.getElementById(item.elementId).classList.add(item.className)
      });
    };
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/CYisR.png" rel="nofollow noreferrer">That's how it looks like and how it should</a></p>