javascript - クリックしたときにボタンの要素IDを取得してjquery uiで使用する方法

Question

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/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.3/jquery-ui.js"></script>

<script>
$(function() {

    $(".dialog").dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 400
    },
    hide: {
        effect: "blind",
        duration: 400
    }
    });

    $( ".opener" ).on ('click',MyJQFunction);
});
function MyJQFunction() {
    $(".dialog").dialog( "open" );
}
</script>

 <?php

 $x = 0;
 while($x < 5){
 $x = $x+1;

 $did1 = 'dialog'.$x;
 $did2 = 'opener'.$x;
 ?>

 <div class = "dialog" id= <?php echo $did1; ?>  title=<?php echo $did1; ?>>
 <p> <?php echo $did1; ?> </p>
 </div>

 <button class= "opener" > <?php echo $did2; ?> Contact</button>

 <?php
 }//end of while loop
 ?>

基本的に、while ループを使用してテーブルを作成しています。ボタンごとに、<p>特定の ID を割り当てています。ここで、この ID を取得し、ボタンをクリックすると、その特定の<p>.

ただし、1 つのボタンをクリックすると、すべてのボタンが同時に表示されます。

この問題を解決するにはどうすればよいですか?