Help open only one element with "dialog" function in JQuery (UI) in MVC environment

Hello everyone and please forgive me in advance if I leave any details out as this is my first post here:

I have a problem using dialog JQuery command. More specifically, I want the button called "Edit" (line 7 below) to open only 1 window as opposed to all behind each other. Below is some of the code I use right now and a short description of what happens with the codde. Thank you in advance for reading!

<!-- C# and HTML code here-->
<table> 
<tbody>
        <% foreach (var item in Model) { %>
    <tr>
    <td>    
                <button class="opener">Edit</button>
                <div class="dialogButton" title="Something"><% Html.RenderAction("Something", "Admin", new { id = item.ID }); %></div>
                 <td>Other values</td>
                  </tr>
</table>

<!-- JQ script is here-->
$(".dialogButton").dialog({ autoOpen: false });
            $(".dialogButton").dialog({ buttons: { "Ok": function () { $(this).dialog("close"); } } });
            $(".dialogButton").dialog({ show: 'fade' });
            $('.opener').click(function () { $('.dialogButton').dialog('open'); });

What the application does so far is it loads the table and has an edit button next to each row (line 7 above), however when the "Edit" button is pressed the Html.RenderAction (line 8) pulls up edit windows for all of the items (item.ID) on the开发者_StackOverflow社区 list instead of only the selected one row. This means that there are currently about 25 windows that pop up behind each other.

What I want the code to do but so far was unable to figure out is only to open the edit window for selected row.

It has also been suggested to replace the last line in the code above (line 17, last) with the following code:

$('.opener').click(function () { $(this).next().dialog('open'); });

In theory this is suppose to open only one element but it does not. Please help!

Thank you again!

Just put unique ID for each div class="dialogButton" and button class="opener"

like div class="dialogButton" id="DialogButton_1" and button class="opener" id="opener_1. Use item.ID or something else that is unique.

and then call the dialog plugin with the ID

$('.opener').click(function () { $('#dialogButton_'+$(this).attr('id')).dialog('open'); });

Basically you will be calling the dialog that coresponds to the opener this way

Hope that sound logical for you.