Javascript wavesurfer js不使用foreach循环

我试图在php中使用foreach循环生成多个wavesurfer音频波，但这不起作用。我使用wavesurfer.js为音频片段生成波形，我在这里输入代码的问题是，我在php while循环中提取了多个音频文件，javascript似乎只针对返回的第一条记录运行

<?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
    }
}
?>

DOM元素的ID必须是唯一的（

#wave

），它是唯一的，但仍然不起作用。请帮助我。您通过

$（'#wave）

选择器尝试了每个

。我不知道如何使用这个。例如，将
替换为
，并将js代码更改为类似
$（'.js wave'）。每个..