繰り返し処理の中のポップアップで表示される値が、レコードの１番目の値になる

Question

お世話になります
###前提・実現したいこと
phpを使用してデータベースのデータを検索結果に応じて繰り返し表示させます。
その際にあるフィールドの値を１行に固定し、中身全体を表示したい場合はカーゾルをあわせることでポップアップ表示されるようにしたいです
###発生している問題・エラーメッセージ
ポップアップで表示はできましたが、表示される内容は常に１レコード目の値が表示されてしまいます

###該当のソースコード
---head部分のjavascript---
<script language="javascript" type="text/javascript">
function showPopup(event) {
    target = document.getElementById("popup");
    
    if (!event) var event = window.event;
    if (!event.pageX) px = event.clientX + document.body.scrollLeft; else px = event.pageX;
    if (!event.pageY) py = event.clientY + document.body.scrollTop; else py = event.pageY;
    
    target.style.left = px+10 + "px";
    target.style.top = py+5 + "px";
    target.style.visibility = "visible";
}

function hidePopup() {
    target = document.getElementById("popup");
    target.style.visibility = "hidden";
}
</script>
---ここまで---

---body内のphp処理---
<?php
foreach ($records as $record) {
//$records ~ record の複数レコードの繰り返し
?>
<a href='javascript:void(0);' onmouseover='showPopup(event);' onmouseout='hidePopup();'>ポップアップ見出し</a>;

            <div id="popup" style="position:absolute; z-index:10; visibility:hidden; background-color:#fbff96;"><?php echo $test; ?></div>

<?php
//繰り返し終了
}
?>

$test = ポップアップに表示する値

以上です
div id とかをレコードに合わせて変更してみたりしましたが上手く行きませんでした。

すいませんがご教授お願い致します

Answer 1

繰り返し処理の中で<div id="popup">を出力されるとid="popup"の要素が複数存在することになると思います。
html内でidは一つにしてください。

<script language="javascript" type="text/javascript">
function showPopup(event, count) {
    target = document.getElementById("popup" + count);

    if (!event) var event = window.event;
    if (!event.pageX) px = event.clientX + document.body.scrollLeft; else px = event.pageX;
    if (!event.pageY) py = event.clientY + document.body.scrollTop; else py = event.pageY;

    target.style.left = px+10 + "px";
    target.style.top = py+5 + "px";
    target.style.visibility = "visible";
}

function hidePopup(count) {
    target = document.getElementById("popup" + count);
    target.style.visibility = "hidden";
}
</script>
<?php
$count = 0;
foreach ($records as $record) {
  $count++;
  //$records ~ record の複数レコードの繰り返し
?>
<a href='javascript:void(0);' onmouseover="showPopup(event, '<?php echo $count; ?>');" onmouseout="hidePopup('<?php echo $count; ?>');">ポップアップ見出し</a>;

            <div id="popup<?php echo $count; ?>" style="position:absolute; z-index:10; visibility:hidden; background-color:#fbff96;">
              <?php echo $test; ?>
            </div>

<?php
//繰り返し終了
}
?>

のように各データごとにポップアップ要素を特定できるようidにカウントなどをつけると良いと思います。

Comments

[satoshi501]

ありがとうございました！
無事実行できました

[sha]

無事できてよかったです。
「idは一つ」ではなく「idはユニーク」と言いたかったので1点訂正させてください。