Get element id from a dmx repeat into javascript

Guys can someone assist please. I can get the audio player to work once I put it inside a dmx-repeat. It works fine when my audio tag is not in the repeat div.
Here is the html code

<div class="row style54" is="dmx-repeat" id="repeat2" dmx-bind:repeat="pagedItemsList.data.Paged_Items.data" key="'itemlist'">
        <audio id="track">
            <source type="audio/mpeg" dmx-bind:src="Description_Audio_file" />
        </audio>
        <div id="player-container">
            <div id="play-pause" class="play">Play</div>
        </div>
    </div>

and here is the javascript code.

<script>
        var track = document.getElementById('track');
var controlBtn = document.getElementById('play-pause');
function playPause() {
    if (track.paused) {
        track.play();
        //controlBtn.textContent = "Pause";
        controlBtn.className = "pause";
    } else { 
        track.pause();
         //controlBtn.textContent = "Play";
        controlBtn.className = "play";
    }
}
controlBtn.addEventListener("click", playPause);
track.addEventListener("ended", function() {
  controlBtn.className = "play";
});
    </script>

My aim here is to play the audio on click of the 'play-pause div