jquery - jQuery UI ダイアログを複数のウィンドウで動的にボタンをクリックして表示する

Question

私はjQueryとUIが初めてです。以下のコードについてアドバイスをお願いします。ボタンをクリックして、同じページにjqueryダイアログウィンドウを表示したい。あなたの助けが必要です。ありがとう、ショー。

HTML :

<button id="opener_1">Enlarge</button>
<div id="dialog_1" title="Dialog Title">Enlarge
  <img class="large_1" src="./large1.jpg" style="display:none" />
</div>

 <button id="opener_2">Enlarge</button>
 <div id="dialog_2" title="Dialog Title">Enlarge
  <img class="large_2" src="./large2.jpg" style="display:none" />
</div>

<button id="opener_3">Enlarge</button>
<div id="dialog_3" title="Dialog Title">Enlarge
  <img class="large_3" src="./large3.jpg" style="display:none" />
</div>

 <button id="opener_1">Enlarge</button>
 <div id="dialog_1" title="Dialog Title">Enlarge
  <img class="large_1" src="./large1.jpg" style="display:none" />
  </div>

 <button id="opener_1">Enlarge</button>
 <div id="dialog_1" title="Dialog Title">Enlarge
  <img class="large_1" src="./large2.jpg" style="display:none" />
</div>

<button id="opener_1">Enlarge</button>
<div id="dialog_1" title="Dialog Title">Enlarge
  <img class="large_1" src="./large3.jpg" style="display:none" />
</div>

Javascript:

$(function(){
    for (var i = 0; i <= button.length; i++) {
        $(function () {
            $('#dialog_' + [i]).dialog({
                autoOpen: false,
                modal: false,
                width: "auto",
                height: "auto"
            })
        });
        $(function(){
            $('#opener_' + [i]).click(function () {
                $('.large_' + [i]).dialog('open');
            });
        });
}