对话框在单击不同按钮时显示来自DB的不同信息

Question

我有10个不同的图像，其中一些数据是从数据库触发的。我还有这段代码完美无缺：

  var dialog = document.querySelector('dialog');

  document.querySelector('#show').onclick = function() {
      dialog.showModal();
  };

  document.querySelector('#close').onclick = function() {
      dialog.close();
  };

我有这样的图像：

//Show the image with some data for it    

<div id="show">
      <img src="images/<?php echo $row1["name"]; ?>.png" alt="<?php echo $row1["name"]; ?>" title="<?php echo $row1["name"]; ?>" width="50" height="50"><br>
     <div>
      <span class="nameBox">
        <?php echo $row1["name"]; ?></span>
        <br>
      <span class="nameData">
        <?php echo $ro["phone"]; ?></span>
     </div>
    </div>

//The dialog which will appear after clicking on the image

    <dialog class="myDialog" id="1">
     <span id="close">x</span>
      <h3 class="headerDialog"><?php echo $row1["name"]; ?></h3>
        <p style="background: black; color: white">phone: <?php echo $row["phone"]; ?><br>
      address: <?php echo $row["address"]; ?></p>
    </dialog>

请不要过分关注php代码，因为它工作正常。它展示了我想要的一切。问题是，如果我为10个图像应用javascript +对话框代码，它只适用于第一个图像，而不适用于其余部分（这就是为什么你看到...对话框id =＆＃34; 1＆＃34;，因为我试图使用不同的ID来解决问题）。它显示第一个对话框完全正常，但当我点击任何其他对话时，没有任何反应。

每次点击任何图像时如何显示对话框，然后根据我刚刚点击的图像在对话框中显示正确的信息？