jquery dialog open only first time - php

Question

I have jquery dialog and when i click over the button it open but only first time when i close it and click second time over the same button it not appears. Here is my code :
Script:
$(function () {
$("#dialogPicture").dialog({
autoOpen: false
});
$(".buttonClass").on("click", function () {
// get the div element with the id dialogClass contained at the same scope as button!
var id = ($(this).siblings(".dialogClass").attr("id"));
$("#" + id).dialog({
autoOpen: false
});
$("#" + id).dialog("open").css({
"font-size": "13px"
});
});
});
HTML :
<td>
<?=$row['NOMER']?><input id="btn2" class="buttonClass" type="button" value="ВИЖ" />
<div class="dialogClass" id="dialogPicture_<?=$row['NOMER'];?>" style="display:none;">
<table class="bilet">
<tr>
<h2>
<td colspan="4">
<div align="center"><strong>ПРЕВОЗЕН БИЛЕТ</strong></div>
</td>
</h2>
</tr>
<p>
<tr >
<td colspan="2" align="right">
</table>
</div>

Answer 1

I think the problem is that on each button click you create a new instance of dialog box.
Try initializing all the dialog boxes in the beginning of the script and let the buttons only open them.
Another issue is that the dialog div is no longer on the table after initialization:
<div id="btn<?=$row['NOMER']?>".....
$(function () {
$(".dialogClass").each(function(){
$(this).dialog({ autoOpen: false });
});
$(".buttonClass").on("click", function () {
// get the div element with the id dialogClass contained at the same scope as button!
var btnId = ($(this).attr("id"));
btnId = btnId.replace("btn","");
$("#dialogPicture_" + btnId).dialog("open").css({
"font-size": "13px"
});
});
});

Answer 2

You can try out this.
You should use this Code to destroy the Dialog in Button Section
$("#TestMenuDialog").dialog("close").dialog("destroy").remove();
var NewDialog = $('<div id="TestMenuDialog"><p style="color:Red;style="font-size:7x;font-weight:normal">' + Message + '</p></div>');
NewDialog.dialog({
modal: false,
title: "Test Dialog",
height: 200,
width: 375,
show: 'clip',
hide: 'clip',
buttons: [
{ text: "OK", click: function () { $(this).dialog("close").dialog("destroy").remove(); } }
]
});
check the Jfiddle Link It works fine
http://jsfiddle.net/zpP3c/1/