javascript - Jquery-Ui Dialog form for each button in a dynamic table -

i generating html table button each row have open jquery ui dialog form.

//the table <table class="table table-reporting table-condensed table-striped" id="tableoperator">        <tbody>         @for (int h = 0; h < model.tolist().count; h++)         {             <tr>                                       <td class="hidden-phone hidden-tablet">                     <button class="update" id="@model.elementat(h).id">update</button>                 </td>             </tr>         }     </tbody> </table>   //the dialog form <div id="dialog-form" title="update ticket" > <form>     <fieldset>         <label for="state">state</label>         <input type="text" name="state" id="state" class="text ui-widget-content ui-corner-all">         <label for="note">note</label>         <input type="text" name="note" id="note" class="text ui-widget-content ui-corner-all">         <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">     </fieldset> </form> 

<script>         $(function () {             var dialog,               state = $("#state").val(),               note = $("#note").val(),                id = id of button update??               dialog = $("#dialog-form").dialog({                 autoopen: false,                 height: 400,                 width: 350,                 modal: true,                 buttons: {                     "ok": function () {                         $.ajax({                             type: "post",                             url: "@url.action("update","ticket")",                             data: { 'id': id, 'state': state, 'note': note },                             cache: false,                             datatype: "json",                             success: function (data) {                             $(this).dialog("close");                                 }                             });                     },                      "cancel": function () {                          $(this).dialog("close");                      }}             });              $(".update").button().on("click", function () {                 dialog.dialog("open");             });         });     </script> 

but problem in action update of ticketcontroller parameters state , node empty. can do? , how can set id = id of button update?

//////// edit: correct code (as suggested @igor)

<script>     $(function () {         var state = $("#state").val(),           note = $("#note").val(),           dialog = $("#dialog-form").dialog({             autoopen: false,             height: 400,             width: 350,             modal: true,             buttons: {                 "ok": function () {                     $.ajax({                         type: "post",                         url: "@url.action("update","ticket")",                         data: { 'id': $(this).data("idt"), 'state': $("#note").val(), 'note': $("#note").val() },                         cache: false,                         datatype: "json",                         success: function (data) {                         $(this).dialog("close");                             }                         });                 },                  "cancel": function () {                      $(this).dialog("close");                  }}         });          $(".update").button().on("click", function () {             dialog.data("idt", this.id);             dialog.dialog("open");         });     }); </script> 

1.store id of clicked button in dialog data property before open dialog.

2.retrieve values sent inside "ok" click.

  "ok": function () {     var id = dialog.data("buttonid");     var state = $("#state").val();     var note = $("#note").val();      $.ajax({       ...  $(".update").button().on("click", function () {   dialog.data("buttonid", this.id);   dialog.dialog("open"); });