Multiple Dialog Boxes - php

Question

I am having an issue with Dialogs in jquery, I have a query that plops up to 4 items of data into a div, in a loop. I want to have each row available for more information via a dialog box.
IN HEAD TAG:
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$( ".dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 500
}
});
$( ".opener" ).click(function() {
$( ".dialog" ).dialog( "open" );
});
});
</script>
PHP:
foreach($veh as $v){
echo '<div class="block">';
$sql = "SELECT * FROM table";
$result = $dbh->query($sql);
$row = $result->fetchall(PDO::FETCH_ASSOC);
foreach($row as $r){
echo '<div class="effect6">'.strtoupper($r['col_name']).'</div>';
echo '<div id="dialog" title="'.$r['eas_no'].'">Text</div>';
echo '<button id="opener">Open</button>';
}
echo '</div>';
}
EDIT
Every Single Dialog box now opens...

Answer 1

Try changing your code to this:
<script>
$(function() {
$( ".dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 500
}
});
$( ".opener" ).bind("click", function() {
var selectorClass = ".dialogDiv" + $(this).attr("id");
$(selectorClass).dialog( "open" );
});
});
</script>
and
$tmp = 0;
foreach($row as $r) {
echo '<div class="effect6">'.strtoupper($r['col_name']).'</div>';
echo '<div class="dialogDiv'.$tmp.' dialog" title="'.$r['eas_no'].'">Text</div>';
echo '<button class="opener" id="'.$tmp.'">Open</button>';
$tmp++;
}

Answer 2

You are making multiple things with same id (dialog and opener). id are supposed to be unique on page