JSFiddle - React, Tailwind, and code Playground

jQuery dialog trigs all the buttons open simultaneously

by Akram kamal

HTML

<table>
  <tr>
    <th>TITLE</th>
    <th>info</th>
  </tr>

  <tr>
    <td class="text-left">
      <?=$objResult["title"];?>
    </td>
    <td>
      <button class="trigger">info</button>
      <div class="dialog" style="display:none;" title="info">
        <iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?title=<?=$objResult['title'];?>"></iframe>
      </div>
    </td>
  </tr>
  <tr>
    <td class="text-left">
      <?=$objResult["title"];?>
    </td>
    <td>
      <button class="trigger">info</button>
      <div class="dialog" style="display:none;" title="info">
        <iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?title=<?=$objResult['title'];?>"></iframe>
      </div>
    </td>
  </tr>
  <tr>
    <td class="text-left">
      <?=$objResult["title"];?>
    </td>
    <td>
      <button class="trigger">info</button>
      <div class="dialog" style="display:none;" title="info">
        <iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?title=<?=$objResult['title'];?>"></iframe>
      </div>
    </td>
  </tr>
  <tr>
    <td class="text-left">
      <?=$objResult["title"];?>
    </td>
    <td>
      <button class="trigger">info</button>
      <div class="dialog" style="display:none;" title="info">
        <iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?title=<?=$objResult['title'];?>"></iframe>
      </div>
    </td>
  </tr>

</table>

JavaScript

$("tr:has(.trigger):has(.dialog)").each(function() {
  var row = this
  var dialog = $(".dialog", row).dialog({
    autoOpen: false,
    position: 'center',
    title: 'definizione',
    draggable: true,
    width: 480,
    height: 380,
    resizable: true,
    modal: true,
    show: 'slide'
  });
  $(".trigger", row).click(function() {
    dialog.dialog("open");
  });

})