php - jQuery dialog Box is not working -

jquery dialogue box not working dynamic data database. want open dialogue box multiple data fetched database. problem when click of link open particular dialogue box particular id of database table record opens previous id's dialogue boxes also.

for example if click on id 2 dialogue box opens 1 , dialogue boxes simultaneously. want download in dialogue box also.

jquery code:

$(document).ready(function() { $(function() { $(".dialog").dialog({ autoopen: false, maxwidth:600,         maxheight: 500,         width: 600,         height: 300,         dialogclass: 'main-dialog-class',                 modal: true    }); $("a.to").on("click", function() { $(".dialog").dialog("open"); }); }); 

php code:

<table>  <?php foreach($tlist $ts) : ?>                      <div class="dialog" title="dialog form">  <?php   $sql1="select * table id='".$ts["id"]."'" ; $result1=mysqli_query($link,$sql1); while($rows=mysqli_fetch_array($result1)){  echo $rows["t1"];  ?> <a href="download.php?filename=<?php echo $rows['path'] ;?>"  target="_blank"><?php echo $rows['name'];?></a><br/> <?php } ?>  </div>                         <tr>                             <td style="display:none">                                 <?php echo $ts["id"]; ?>                             </td>                             <td>                                 <a href="#" class="to" >                                <?php echo $ts["title"]; ?></a>                             </td>                             <td>                                 <?php echo $ts["t1"]; ?>                             </td>                             <td>                                 <?php echo $ts["t2"]; ?>                             </td> </tr> </table> 

for starters, html looks nesting dialog box in <div> inside table, not in cell (that should error in browser).

but in javascript, need way identify each dialog box. error reporting makes sense; choosing $('.dialog'), saying "pick every element on page classname "dialog".

i think easiest way change javascript to:

$("a.to").on("click", function() {     $(this).find(".dialog").dialog("open"); }); 

and move dialog box cell in each row in php.

otherwise, may choose unique identifier each dialog box, , rename them id, not class.

edit

yes, can add unique id in php selectors, add same id in data , find them jquery selector.

in php:

<td>   <a href="#" class="to" data-dialogfinder='<?php echo $ts["id"]; ?>'>    <?php echo $ts["title"]; ?>   </a> </td> 

then, in jquery:

$("a.to").on("click", function() {     var diabox='#'+$(this).data("dialogfinder");     $(diabox).dialog("open"); });