How do I assign multiple volume sliders to specific audio?

Question

I'm trying to use multiple audio players, each with their own assigned volume slider. I'm close BUT my 2nd volume slider only operates the audio from my first player. I know I'm missing something but can't figure it out. Any help is greatly appreciated.

I'm sorry I'm new to this but I'm not sure if I need to be using JS to achieve this. I just am not sure how to properly id my sliders to be assigned to the the corresponding audio clips.

You can click the images in the snippet to play the two audio clips but note that the sliders only affect the volume for the first clip.

<audio id="music1" controls="controls1">
  <source src="https://ia804504.us.archive.org/17/items/bass.pianochords/bass.pianochords.mp3" type="audio/mp3" />
</audio>

<div id="audioplayer-wrapper1">
  <button id="pButton1" onclick="playAudio(music1)" class="play1"></button>
  <p id="pButton-text"></p>
</div>

<style>
  /* This will hide default HTML player */
  #music1 {
    display: none;
  }

  /* Audioplayer background */
  #audioplayer-wrapper1 {
    padding: ;
    background-color: ;
    border-radius: ;
    display: ;
    justify-content: ;
    align-items: ;
  }

  /* Play button text style */
  #pButton-text {
    align-self: center;
    margin: 0px 0px 0px 16px;
    font-family: Roboto;
    font-weight: 600;
    font-size: 20px;
    color: #333;
  }

  /* Play button style */
  #pButton1 {
    height: 40px;
    width: 40px;
    outline: none;
    cursor: pointer;
    background-size: 100% 100%;
    background-position: absolute;
  top: 50%;
  transform: translateY();
  }

  /* Play button icon */
  .play1 {
    width: 100%;
    height: 100%;
    background: url('https://uploads-ssl.webflow.com/602f08a2b5a1011f9baf6172/60e3c0a0a4f7c03704fbcbc3_grand-piano.png') repeat;
  }

  /* Pause button icon */
  .pause1 {
    width: 100%;
    height: 100%;
    background: url('https://uploads-ssl.webflow.com/602f08a2b5a1011f9baf6172/60e3c0a0a4f7c03704fbcbc3_grand-piano.png') repeat;
  }
 
</style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  // variable to store HTML5 audio element
  var music = document.getElementById('music1').loop = true;
  var music = document.getElementById('music1').volume = 0.8;

  function playAudio(music1) {
    if (music1.paused) {
      music1.play();
      pButton1.className = "pause1";
    } else {
      music1.pause();
      pButton1.className = "play1";
    }
  }
</script>
<script>
  function changevolume(amount) {
  var audioobject = document.getElementsByTagName("audio")[0];
  audioobject.volume = amount;
}
</script>
<audio src="https://ia804504.us.archive.org/17/items/bass.pianochords/bass.pianochords.mp3" type="audio/mp3"></audio>

<input type="range" id="vol" max="1" min="0" step="0.01" onchange="changevolume(this.value)" />

<audio id="music2" controls="controls2">
  <source src="https://ia804504.us.archive.org/17/items/bass.pianochords/reversepiano.mp3" type="audio/mp3" />
</audio>

<div id="audioplayer-wrapper2">
  <button id="pButton2" onclick="playAudio(music2)" class="play2"></button>
  <p id="pButton-text"></p>
</div>

<style>
  /* This will hide default HTML player */
  #music2 {
    display: none;
  }

  /* Audioplayer background */
  #audioplayer-wrapper2 {
    padding: ;
    background-color: ;
    border-radius: ;
    display: ;
    justify-content: ;
    align-items: ;
  }

  /* Play button text style */
  #pButton-text {
    align-self: center;
    margin: 0px 0px 0px 16px;
    font-family: Roboto;
    font-weight: 600;
    font-size: 20px;
    color: #333;
  }

  /* Play button style */
  #pButton2 {
    height: 40px;
    width: 40px;
    outline: none;
    cursor: pointer;
    background-size: 100% 100%;
    background-position: absolute;
  top: 50%;
  transform: translateY();
  }

  /* Play button icon */
  .play2 {
    width: 100%;
    height: 100%;
    background: url('https://uploads-ssl.webflow.com/602f08a2b5a1011f9baf6172/60e3c58253af4de43de29285_wind.png') repeat;
  }

  /* Pause button icon */
  .pause2 {
    width: 100%;
    height: 100%;
    background: url('https://uploads-ssl.webflow.com/602f08a2b5a1011f9baf6172/60e3c58253af4de43de29285_wind.png') repeat;
  }
</style>

<script>
  // variable to store HTML5 audio element
  var music = document.getElementById('music2').loop = true;
  var music = document.getElementById('music2').volume = 0.8;
  
  function playAudio(music2) {
    if (music2.paused) {
      music2.play();
      pButton2.className = "pause2";
    } else {
      music2.pause();
      pButton2.className = "play2";
    }
  }
</script>
<script>
  function changevolume(amount) {
  var audioobject = document.getElementsByTagName("audio")[0];
  audioobject.volume = amount;
}
</script>
<audio src="https://ia804504.us.archive.org/17/items/bass.pianochords/bass.pianochords.mp3" type="audio/mp3"></audio>

<input type="range" id="vol" max="1" min="0" step="0.01" onchange="changevolume(this.value)" />