Q:

Changing icons using js

I have an icons play/pause WHen I click play, I can see pause, but I have many blocks with audio and in my js code I can change just first icon(from play to pause).  How can I make it to all my audio elements on the page? 

let playIcon = "https://image.flaticon.com/icons/svg/149/149668.svg";
let pauseIcon = "https://image.flaticon.com/icons/svg/149/149670.svg";

function togglePlay(video) {
  var audio = document.getElementsByTagName("audio")[0];
  if (! audio)
    return;
  audio.paused ?  audio.play() : audio.pause();
  document.getElementById("button").src = audio.paused ?  playIcon : pauseIcon;
}
#button {
  width: 50px;
  display: block;
}
<div class="player" onclick="togglePlay(this)">
  <img src="https://image.flaticon.com/icons/svg/149/149668.svg" id="button">
  <audio>
    <source src="https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3" />
  </audio>
</div>

A:

Don't use the ID to get the button, but access it relatively to the element that calls the function.  Try this function. 
function togglePlay(elm) {
  var audio = elm.querySelector('audio');
  if(!audio) return;

  audio.paused ?  audio.play() : audio.pause();
  elm.querySelector('img').src = audio.paused ?  playIcon : pauseIcon;
}

