jQuery dialog Box is not working - php

Question

jQuery Dialogue box is not working properly for dynamic data from database. I want to open dialogue box for multiple data fetched from database. But the problem is that when I click any of the link to open particular dialogue box for particular id of database table record but it opens all the previous id's dialogue boxes also.
For example if I click on id 2 dialogue box it opens 1 and dialogue boxes simultaneously. I want some 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 as $ts) : ?>
<div class="dialog" title="Dialog Form">
<?php
$sql1="select * from table where ID='".$ts["ID"]."'" ;
$result1=mysqli_query($link,$sql1);
while($rows=mysqli_fetch_array($result1)){
echo $rows["t1"];
?>
<?php echo $rows['Name'];?><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>

Answer 1

For starters, your HTML looks like you are nesting the dialog box in a <div> inside the table, but not in a cell (that should be an error in the browser).
But in your javascript, you need a way to specifically identify each dialog box. The error you are reporting makes sense; by choosing $('.dialog'), you are saying "pick every element on the page with a classname "dialog".
I think the easiest way is to change your JavaScript to:
$("a.To").on("click", function() {
$(this).find(".dialog").dialog("open");
});
and then move the dialog box into a cell in each row in your PHP.
Otherwise, you may choose a unique identifier for each dialog box, and rename them to an id, not a class.
EDIT
Yes, you can add the unique id in PHP for the selectors, add the same id in data and then find them with a jQuery selector.
In your PHP:
<td>
<a href="#" class="To" data-dialogfinder='<?php echo $ts["ID"]; ?>'>
<?php echo $ts["Title"]; ?>
</a>
</td>
Then, in you jQuery:
$("a.To").on("click", function() {
var diabox='#'+$(this).data("dialogfinder");
$(diabox).dialog("open");
});

Answer 2

I don't know if that is the full code, but in what you have posted you have missing the endforeach; (to close the foreach() : opened at the beginning).