How do I make it so I have multiple audios on one page?

I'm working on a music page for my website, and I'm trying to put songs on it, but when I press them, it only plays one song. I've tried to use , rename the id, and I've tried it without any separation, but it just doesn't play the right song.
This is the code I currently have down. You can see i have Asong and Bsong, I just don't understand why it still merges together??? If someone could redo my code, I'd be very thankful. Thanks!

<div>
<button id="ASong" onClick="playandpause()">
  <audio
    src="https://archive.org/download/1998-01-suite-pee/04%20-%20Asking%20for%20It.mp3"

  ></audio>
  <img src="https://images-na.ssl-images-amazon.com/images/I/71uuPnDUZkL._SL1050_.jpg" height=200 />
  <p>
    Asking For It - Hole
  </p><script>
  var aud = document.getElementById("ASong").children[0];
  var isPlaying = false;
  aud.pause();

  function playandpause() {
    if (isPlaying) {
      aud.pause();
    } else {
      aud.play();
    }
    isPlaying = !isPlaying;
  }
</script>
</button>


</div>
<div>
<button id="BSong" onClick="playandpause()">
  <audio
    src="https://archive.org/download/1998-01-suite-pee/%281998%29%2001%20Suite-Pee.mp3"

  ></audio>
  <img src="https://th.bing.com/th/id/OIP.PkMiOQ02e2P13wIY7mYIKwAAAA?rs=1&pid=ImgDetMain" height=200 />
  <p>
    Suite-Pee - System Of A Down
  </p>
</button>


<script>
  var aud = document.getElementById("BSong").children[0];
  var isPlaying = false;
  aud.pause();

  function playandpause() {
    if (isPlaying) {
      aud.pause();
    } else {
      aud.play();
    }
    isPlaying = !isPlaying;
  }
</script>
</div>

Placing the <script> inside a <div> does not associate it with that <div> in any way. The browser merges the two <script>s, which, as was pointed out, means you are redeclaring the same variables. Which is part of why you were only playing the second song.

Change the playandpause() calls to pass the event parameter. This means the playandpause() function can tell which button was pushed and means you will no longer need id's for your buttons.

Get rid of the two global variables.

Finally change the playandpause() function to determine which <audio> element to play (or pause) and use the aud.paused to tell if the audio is playing or not.

All of this means that to add more songs, you do not have to add more Javascript functions. You only have to add <button>, <audio> and <image> elements.

See my EDIT comments to see specific changes.

<div>
  <!--  EDIT Add event parameter and no longer need an id  -->
  <button onClick="playandpause(event)">
        <audio src="https://archive.org/download/1998-01-suite-pee/04%20-%20Asking%20for%20It.mp3"></audio>
        <img src="https://images-na.ssl-images-amazon.com/images/I/71uuPnDUZkL._SL1050_.jpg" height=200>
        <p> Asking For It - Hole </p>
      </button>
</div>


<div>
  <!--  EDIT Add event parameter and no longer need an id  -->
  <button onClick="playandpause(event)">
        <audio src="https://archive.org/download/1998-01-suite-pee/%281998%29%2001%20Suite-Pee.mp3"></audio>
        <img src="https://th.bing.com/th/id/OIP.PkMiOQ02e2P13wIY7mYIKwAAAA?rs=1&pid=ImgDetMain" height=200 />
        <p> Suite-Pee - System Of A Down </p>
      </button>
</div>

<!-- EDIT Easily add another song -->
  <button onClick="playandpause(event)">
        <audio src="https://ia801507.us.archive.org/17/items/1998-01-suite-pee/Laplace%27s%20Angel.mp3"></audio>
        <img src="https://placebear.com/100/100.jpg" height=200 />


<!-- EDIT You only need one script and no globals variables. -->
<script>
  // EDIT Add event parameter so we know which play button was clicked on
  function playandpause(event) {
    // EDIT Change how we set aud and isPlaying
    let aud = event.target.parentElement.querySelector("audio")
    let isPlaying = !aud.paused

    // EDIT Pause all audio elements, so we'll only have one playing
    for (let song of document.querySelectorAll("audio")) song.pause()

    // EDIT Use .paused instead of isPlaying
    if (isPlaying) aud.pause();
    else aud.play();

    // EDIT Don't need this anymore
    // isPlaying = !isPlaying;
  }
</script>