Getting "For Loop" to work the same as "forEach"

JavaScript
1

This one uses For Loop
What was done wrong with this one?
Is that something that can be easily fixed?

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.
https://jsfiddle.net/pezuLqvo/85/

  function hideAllButtons(button) {
    const buttons = button.querySelectorAll(".play, .pause, .speaker");
    for (let i = 0; i < buttons.length; i += 1) {
      hide(buttons[i]);
    }
  }

  function pauseAllButtons(buttons) {
    for (let i = 0; i < 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");
    }

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?

This one uses forEach
https://jsfiddle.net/pezuLqvo/84/

 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");
    }
2

This was the answer:
https://jsfiddle.net/pezuLqvo/93/

function pauseAllButtons() {
  const buttons = document.querySelectorAll(".playButton");
  for (let i = 0; i < buttons.length; i += 1) {
    if (isPlaying(buttons[i])) {
      showPlayButton(buttons[i]);
    }
  }
}