How to generate javascript functions within while

Question

I am developing a Soundboard, and in this code, each <audio> is generated by record found in the database, and each of them has a volume controller, however, all controllers only work pro last <audio> generated, I believe it is because each iteration overwrites the last id, some idea of how I can generate a volume bar for each track?

<?php
        while($teste = $usr_idLogged_aTracks_r->fetch_assoc()) { 
            $trackId = $teste['atrack_id'];
            $trackTitle = $teste['atrack_title'];
            $trackPath = $teste['atrack_path'];
            $trackPlaylist = $teste['atrack_playlistId']; ?>

        <div class="col-md-6 col-sm-12 col-xs-12" >
          <div class="x_panel">
            <div class="x_title">
              <h2><?php echo $trackTitle ?> <small> <?php echo $trackId ?> </small></h2>
              <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Settings 1</a>
                    </li>
                    <li><a href="#">Settings 2</a>
                    </li>
                  </ul>
                </li>
                <li><a class="close-link"><i class="fa fa-close"></i></a>
                </li>
              </ul>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
            <div class="row">

                <audio style=" width: 100%; max-width: 600px" id="<?php echo $trackId ?>" controls>
                    <source src="<?php echo $trackPath ?>" type="audio/mp3">
                </audio>

                <input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>

                <button onclick="document.getElementById('<?php echo $trackId ?>').play()">Reproduzir o áudio</button>
                <button onclick="document.getElementById('<?php echo $trackId ?>').pause()">Pausar o áudio</button>.

                <script type="text/javascript">
                    window.SetVolume = function(val) {

                            var player = document.getElementById('<?php echo $trackId ?>');
                            console.log('Before: ' + player.volume);
                            player.volume = val / 100;
                            console.log('After: ' + player.volume);
                    }
                </script>
            </div>
            </div>
          </div>
         </div>
        <?php }
        ?>

Answer 1

Make the following changes:

Altere of:

<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>

To:

<input id="vol-control_<?php echo $trackId; ?>" class="volume" type="range" min="0" max="100" step="1" />

The secret will be here: vol-control_<?php echo $trackId; ?> (_)

Out of the loop for, do the following:

<script>
var volume = document.getElementsByClassName("volume");
for (let i = 0; i < volume.length; i++) {
  volume[i].oninput = function(ev) {
    var id = ev.target.id;
    var val = ev.target.value;
    var player = document.getElementById(id.split("_")[1]);

    console.log('Before: ' + player.volume);
    player.volume = val / 100;
    console.log('After: ' + player.volume);
  }
}
</script>

Remove the javascript part you had putting in your code:

<script type="text/javascript">
                    window.SetVolume = function(val) {

                            var player = document.getElementById('<?php echo $trackId ?>');
                            console.log('Before: ' + player.volume);
                            player.volume = val / 100;
                            console.log('After: ' + player.volume);
                    }
                </script>

Complete Code:

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
//Tive que fazer isso só pra demo. Mas você deve mudar no seu código 
$trackId = $row['OrderID']; 
$trackTitle = $row['CustomerID']; 
$trackPath = $row['EmployeeID']; 
$trackPlaylist = $row['OrderDate']; ?>
<div class="col-md-6 col-sm-12 col-xs-12">
  <div class="x_panel">
    <div class="x_title">
      <h2>
        <?php echo $trackTitle ?> <small> <?php echo $trackId ?> </small></h2>
      <ul class="nav navbar-right panel_toolbox">
        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Settings 1</a>
            </li>
            <li><a href="#">Settings 2</a>
            </li>
          </ul>
        </li>
        <li><a class="close-link"><i class="fa fa-close"></i></a>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <div class="x_content">
      <div class="row">

        <audio style=" width: 100%; max-width: 600px" id="<?php echo $trackId ?>" controls>
                <source src="https://www.w3schools.com/html/horse.ogg" type="audio/mp3">
            </audio>

        <input id="vol-control_<?php echo $trackId; ?>" data-id="<?php echo $trackId; ?>" class="volume" type="range" min="0" max="100" step="1" />

        <button onclick="document.getElementById('<?php echo $trackId ?>').play()" class="reproduzir">Reproduzir o áudio</button>
        <button onclick="document.getElementById('<?php echo $trackId ?>').pause()" class="pausar">Pausar o áudio</button>.

      </div>
    </div>
  </div>
</div>
<?php
}
?>
<script>
  var volume = document.getElementsByClassName("volume");

  for (let i = 0; i < volume.length; i++) {
    volume[i].oninput = function(ev) {
      var id = ev.target.id;
      var val = ev.target.value;
      var player = document.getElementById(id.split("_")[1]);
      console.log('Before: ' + player.volume);
      player.volume = val / 100;
      console.log('After: ' + player.volume);
    }
  }
</script>