title: Getting 'For Loop' to work the same as 'forEach'
body: <p>This one uses <strong>For Loop</strong></p>
  
  <p>After you click on another button they don’t change back to the play button, and instead they stay on pause. The audio pauses without an issue, it’s just the buttons that don’t change back for some reason.</p>
  
  <p><a href="https://jsfiddle.net/pezuLqvo/85/" rel="nofollow noreferrer">https://jsfiddle.net/pezuLqvo/85/</a></p>
  
  <p><a href="https://i.stack.imgur.com/ua8LT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ua8LT.png" alt="enter image description here"></a></p>
  
  <pre class="lang-js prettyprint-override"><code>function hideAllButtons(button) {
    const buttons = button.querySelectorAll(".play, .pause, .speaker");
    for (let i = 0; i &lt; buttons.length; i += 1) {
      hide(buttons[i]);
    }
  }
  
  function pauseAllButtons(buttons) {
    for (let i = 0; i &lt; buttons.length; i += 1) {
      if (isPlaying(buttons[i])) {
        showPlayButton(buttons[i]);
      }
    }
  }
  
  function showPauseButton(button) {
    const pause = getPause(button);
    pauseAllButtons(button);
    hideAllButtons(button);
    show(pause);
    button.classList.add("active");
  }
  </code></pre>
  
  <p><strong>Looking at how this one was set up, are you able to determine what I would change in the above code to fix that issue?</strong></p>
  
  <p>This one uses <strong>forEach</strong></p>
  
  <p><a href="https://jsfiddle.net/pezuLqvo/84/" rel="nofollow noreferrer">https://jsfiddle.net/pezuLqvo/84/</a></p>
  
  <p><a href="https://i.stack.imgur.com/yYs1l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yYs1l.png" alt="enter image description here"></a></p>
  
  <pre class="lang-js prettyprint-override"><code>function hideAllButtons(button) {
    button.querySelectorAll(".play, .pause, .speaker").forEach(hide);
  }
  
  function pauseAllButtons() {
    const buttons = document.querySelectorAll(".playButton");
    buttons.forEach(function hidePause(button) {
      if (isPlaying(button)) {
        showPlayButton(button);
      }
    });
  }
  
  function showPauseButton(button) {
    const pause = getPause(button);
    pauseAllButtons();
    hideAllButtons(button);
    show(pause);
    button.classList.add("active");
  }
  </code></pre>