Воспроизведение аудио HTML 5 на основе идентификатора из SQL

Я пытаюсь воспроизвести музыку из своей папки на основе местоположения sql и отлично работаю, но только с первым звуком.. и мне нужно воспроизвести все аудио на основе идентификатора или чего-то еще. Нужна была какая-то помощь. Спасибо!

PHP +HTML код для этого плеера:

<?php
  $q = mysqli_query($db,"SELECT * FROM music ");
   while ($row = mysqli_fetch_assoc($q)) {
        $id = $row['id'];
        $location = $row['location'];
        $name = $row['name'];
        $trackname = $row['trackname'];

?>
<div class="player paused">
   <div class="album">
    <div class="cover">
      <div><img src="https://www.liveout.ro/media/events/cover_picture/140763_4269419504711467855267480452363124163978086831790255925789106330.jpg" /></div>
    </div>
  </div>

  <div class="info">
    <div class="time">
      <span class="current-time">0:00</span>
      <span class="progress"><span></span></span>
      <span class="duration">0:00</span>
    </div>

    <h2><?php echo $name;?></h2>
    <h3><?php echo $trackname;?></h3>
   </div>

  <div class="actions">
     <button class="buttn rw">
      <div class="arrow"></div>
      <div class="arrow"></div>
    </button>
    <button class="buttn play-pause">
      <div class="arrow"></div>
    </button>
    <button class="buttn ff">
      <div class="arrow"></div>
      <div class="arrow"></div>
    </button>
   </div>

  <audio preload src="<?php echo $location;?>" id="music" track="<?php echo $id;?>"></audio>
</div>
<?php } ?>

Это код JAVASCRIPT для этого плеера:

Я думаю, что здесь должны быть некоторые изменения в работе..

var player = $('.player'),
    audio = player.find('audio'),
    duration = $('.duration'),
    currentTime = $('.current-time'),
    progressBar = $('.progress span'),
    mouseDown = false,
    rewind, showCurrentTime;

function secsToMins(time) {
  var int = Math.floor(time),
      mins = Math.floor(int / 60),
      secs = int % 60,
      newTime = mins + ':' + ('0' + secs).slice(-2);

  return newTime;
}

function getCurrentTime() {
  var currentTimeFormatted = secsToMins(audio[0].currentTime),
      currentTimePercentage = audio[0].currentTime / audio[0].duration * 100;

  currentTime.text(currentTimeFormatted);
  progressBar.css('width', currentTimePercentage + '%');

  if (player.hasClass('playing')) {
    showCurrentTime = requestAnimationFrame(getCurrentTime);
  } else {
    cancelAnimationFrame(showCurrentTime);
  }
}

audio.on('loadedmetadata', function() {
  var durationFormatted = secsToMins(audio[0].duration);
  duration.text(durationFormatted);
}).on('ended', function() {
  if ($('.repeat').hasClass('active')) {
    audio[0].currentTime = 0;
    audio[0].play();
  } else {
    player.removeClass('playing').addClass('paused');
    audio[0].currentTime = 0;
  }
});

$('button').on('click', function() {
  var self = $(this);

  if (self.hasClass('play-pause') && player.hasClass('paused')) {
    player.removeClass('paused').addClass('playing');
    audio[0].play();
    getCurrentTime();
  } else if (self.hasClass('play-pause') && player.hasClass('playing')) {
    player.removeClass('playing').addClass('paused');
    audio[0].pause();
  }

  if (self.hasClass('shuffle') || self.hasClass('repeat')) {
    self.toggleClass('active');
  }
}).on('mousedown', function() {
  var self = $(this);

  if (self.hasClass('ff')) {
    player.addClass('ffing');
    audio[0].playbackRate = 2;
  }

  if (self.hasClass('rw')) {
    player.addClass('rwing');
    rewind = setInterval(function() { audio[0].currentTime -= .3; }, 100);
  }
}).on('mouseup', function() {
  var self = $(this);

  if (self.hasClass('ff')) {
    player.removeClass('ffing');
    audio[0].playbackRate = 1;
  }

  if (self.hasClass('rw')) {
    player.removeClass('rwing');
    clearInterval(rewind);
  }
});

player.on('mousedown mouseup', function() {
  mouseDown = !mouseDown;
});

progressBar.parent().on('click mousemove', function(e) {
  var self = $(this),
      totalWidth = self.width(),
      offsetX = e.offsetX,
      offsetPercentage = offsetX / totalWidth;

  if (mouseDown || e.type === 'click') {
    audio[0].currentTime = audio[0].duration * offsetPercentage;
    if (player.hasClass('paused')) {
      progressBar.css('width', offsetPercentage * 100 + '%');
    }
  }
});