Can't open only one element with "dialog" function

Can't open only one element with "dialog" function

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 JQ 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!

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

  13. <!-- JQ script is here-->
  14. $(".dialogButton").dialog({ autoOpen: false });
  15.             $(".dialogButton").dialog({ buttons: { "Ok": function () { $(this).dialog("close"); } } });
  16.             $(".dialogButton").dialog({ show: 'fade' });
  17.             $('.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 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.

Thank you again!