waveurfer js不使用foreach循环

I am trying to generate multiple wavesurfer audio waves using an foreach loop in php, but this is not working.I'm using the wavesurfer.js to generate a waveforms for audio clips, the problem I am enter code here having is that I have multiple audio files being pulled in a php while loop, and the javascript only seems to run for the first record returned..

<?php 
foreach ($aReleases as $aRelease) {
    $aTracks = explode(',',$aRelease['track_file']);
    foreach ($aTracks as $aTrack) {                                             
        $path = getConfig('mediaUrl').'uploads/'.$aTrack;  
        ?>  
        <div id="wave">    
            <div><?php echo ucfirst($aRelease['title']); ?></div>
            <canvas class='wave' data-path='<?php echo $path;?>'   data-id='<?php echo $id;?>' width='500' height='128'></canvas>
        </div>                                                
    <?php
    }
}
?>