How do I make multiple play and pause music buttons that play different audios?

Question

I'm trying to add multiple play and pause buttons to my website that play different audio. Though I've been successful making one play and pause pair, every time I try and make another one it will play the same audio as the previous button despite me changing the audio. It's like one of the audio sources (usually the first one) are connected. I can push one play button and then the other buttons pause and it will work. I've tried recoding, removing my css, using the same class, using different classes, changing the onclick, switching the audios, removing the elements from the function, changing the class name to button button1 and button button2 respectively or something random, changing class to ID, using a tag instead of . when using css, etc- But no matter how many buttons I make, they keep playing the exact same audio even if they're all different. Can someone help me? Your help will be vastly appreciated!

My current attempt at making the audio button pairs play different songs to no avail. First segment is song 1 and the other is song 2.

pastebin link of my code

<style>
}
 
.button { 
  padding: 20px;
  display: inline-block;
  width:100px;
 background-image:url('https://media.discordapp.net/attachments/468801481429090344/1072573795275128935/1133px-Th06backcover.jpg?width=755&height=600'); 
  border: 1px solid #8b00c9;
  color: #da3a0e;
  border-radius: 10px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  margin: 4px 2px;
  cursor:  pointer;
  font-family: 'arcadeclassic'
}
</style>
 
 
          <audio id="myAudio">
  <source src="https://cdn.discordapp.com/attachments/468801481429090344/1072576368279289887/ytmp3free.cc_touhou-145-ulil-ps4-ost-reisens-theme-lunatic-eyes-invisible-full-moon-youtubemp3free.org.mp3" type="audio/ogg">
  <source src="https://cdn.discordapp.com/attachments/468801481429090344/1072576368279289887/ytmp3free.cc_touhou-145-ulil-ps4-ost-reisens-theme-lunatic-eyes-invisible-full-moon-youtubemp3free.org.mp3" type="audio/mpeg">
</audio>
 
<button  onclick="playAudio()" class="button"><bold>PLAY!</bold></button>
<button onclick="pauseAudio()" class="button"><bold>NOPE!</bold></button> 
 
<script>
var x = document.getElementById("myAudio"); 
 
function playAudio() { 
  x.play(); 
} 
 
function pauseAudio() { 
  x.pause(); 
} 
</script>
 
    <audio id="myAudio">
  <source src="https://cdn.discordapp.com/attachments/468801481429090344/1072585621090095235/ytmp3free.cc_unl-cirnos-theme-beloved-tomboyish-girl-youtubemp3free.org1.mp3" type="audio/ogg">
  <source src="https://cdn.discordapp.com/attachments/468801481429090344/1072585621090095235/ytmp3free.cc_unl-cirnos-theme-beloved-tomboyish-girl-youtubemp3free.org1.mp3" type="audio/mpeg">
</audio>
 
<button  onclick="playAudio()" class="button"><bold>PLAY!</bold></button>
<button onclick="pauseAudio()" class="button"><bold>NOPE!</bold></button> 
 
<script>
var x = document.getElementById("myAudio"); 
 
function playAudio() { 
  x.play(); 
} 
 
function pauseAudio() { 
  x.pause(); 
} 
</script>

Answer 1

It is a variable name issue, check this code. It should work:

 
.button { 
  padding: 20px;
  display: inline-block;
  width:100px;
 background-image:url('https://media.discordapp.net/attachments/468801481429090344/1072573795275128935/1133px-Th06backcover.jpg?width=755&height=600'); 
  border: 1px solid #8b00c9;
  color: #da3a0e;
  border-radius: 10px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  margin: 4px 2px;
  cursor:  pointer;
  font-family: 'arcadeclassic'
}

<audio id="myAudio">
  <source src="https://cdn.discordapp.com/attachments/468801481429090344/1072576368279289887/ytmp3free.cc_touhou-145-ulil-ps4-ost-reisens-theme-lunatic-eyes-invisible-full-moon-youtubemp3free.org.mp3" type="audio/ogg">
  <source src="https://cdn.discordapp.com/attachments/468801481429090344/1072576368279289887/ytmp3free.cc_touhou-145-ulil-ps4-ost-reisens-theme-lunatic-eyes-invisible-full-moon-youtubemp3free.org.mp3" type="audio/mpeg">
</audio>
 
<button  onclick="playAudio()" class="button"><bold>PLAY!</bold></button>
<button onclick="pauseAudio()" class="button"><bold>NOPE!</bold></button> 
 
<script>
var x = document.getElementById("myAudio"); 
 
function playAudio() { 
  x.play(); 
} 
 
function pauseAudio() { 
  x.pause(); 
} 
</script>
 
    <audio id="myAudio2">
  <source src="https://cdn.discordapp.com/attachments/468801481429090344/1072585621090095235/ytmp3free.cc_unl-cirnos-theme-beloved-tomboyish-girl-youtubemp3free.org1.mp3" type="audio/ogg">
  <source src="https://cdn.discordapp.com/attachments/468801481429090344/1072585621090095235/ytmp3free.cc_unl-cirnos-theme-beloved-tomboyish-girl-youtubemp3free.org1.mp3" type="audio/mpeg">
</audio>
 
<button  onclick="playAudio2()" class="button"><bold>PLAY!</bold></button>
<button onclick="pauseAudio2()" class="button"><bold>NOPE!</bold></button> 
 
<script>
var y = document.getElementById("myAudio2"); 
 
function playAudio2() { 
  y.play(); 
} 
 
function pauseAudio2() { 
  y.pause(); 
} 
</script>

Don't duplicate variable/function names if you don't have good control over the scope