JavaScript onclick只工作一次，不会'；t更新

我有以下php代码：

foreach ($facility_names as $name)
{
    echo '<div class="row facility-name">';
    echo '<button id="facilityNameLeft" class="btn btn-default btn-fill btn-menu" onclick="javascript:showDetails()">'.$name.'</button>';
    echo '</div>';
}

<h1 id="facilityNameRight">Aquatics Centre</h1>

---

现在，我还不熟悉javascript，但我不明白为什么onclick在我重新加载页面之前只工作一次，为什么它只使用第一个$name的值更新h1标记的innerHTML（无论我按下哪个按钮）。

“id”值在页面上必须是唯一的。您对每组元素使用相同的id。这很有效！非常感谢。

function showDetails() {
    var facilityName = document.getElementById("facilityNameLeft").innerHTML;
    document.getElementById("facilityNameRight").innerHTML = facilityName;
}