切换一组结果中的每个按钮

我的搜索脚本使用 while 列出了 10 个来自 MySQL 的 MP3 结果。我想在用户单击"播放"按钮时打开播放器，然后将文本更改为"停止"。

在下面的脚本中，每件事都工作正常，但它仅适用于第一个结果。如果我单击其他结果，它们只会播放第一个结果。如何切换所有搜索结果上的"播放/停止"按钮？

Javascript：

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("player");
    var text = document.getElementById("playtext");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Play";
    } else {
        ele.style.display = "block";
        text.innerHTML = "Stop";
    }
}
</script>

.PHP：

 if(mysql_num_rows($raw_results) > 0){     
    while($results = mysql_fetch_array($raw_results)) {
        $title = $results['title'];
        $download = $results['url'];
        $album = $results['album'];
        $size = $results['size'];
        echo '<div id="song_html">';
            echo '<div class="left">';
                echo $size;
            echo '</div>';
            echo '<div id="right_song">';
                echo '<div style="font-size:15px;"><b>'.$title.'</b></div>';
                echo '<div style="font-size:12px;"><b>Movie : <a href=search.php?search='.urlencode($album).'><font color="blue">'.$album.'</font></a></b></div>';
                echo '<div style="float:left; height:27px; font-size:13px; padding-top:2px;">';
                    echo '<div style="float:left; height:27px; font-size:13px; padding-top:2px;"><b><a href='.$download.'><font color="green">Download</font></a></b></div>';
                echo '</div>';  
                echo '<a id="playtext" href="javascript:toggle();">Play</a>';
                echo '<div id="player"><h1>Player</h1></div>';
            echo '</div>';
        echo '</div>';
    }
}

.CSS：

#playtext
{
    padding-left:10px;
    float:left; 
    height:27px; 
    font-size:13px; 
    padding-top:4px;
}
#player
{
    display: none;
}