title: How do I create button with dynamic parameters onclick event using Javascript?
body: <p>I have a DataTable and some rows on it. Each row has an Edit button and each Edit button calls myFunction() where I edit the data of that row only. The problem is here: I edit one row, then a second one, then I try to edit the first one again but it contains the data of the first one in onClick event parameters.</p>
  <pre><code>edit_admin_request(this_,data_){
    //open modal and edit the users data. Modal has a button which when clicked calls myFunction()
  }
  
  edit_admin_object = {}; //this is defined outside of the function
  
  function myFunction(){
     ...
  
     edit_admin_object['name'] = name_.value;
     edit_admin_object['email'] = email_.value;
     var edit_button = '&lt;button type=&quot;button&quot; id=&quot;buttons&quot; onclick=&quot;edit_admin_request(this,JSON.stringify(edit_admin_object))&quot; name=&quot;edit_admin&quot;&gt;Edit&lt;/button&gt;';
     var rowNode = myTable.row(window.rowindex).data(['&lt;b&gt;' + name_.value + '&lt;/b&gt;', admin_role.value == '0' ? 'Admin' : 'Superadmin', phone_.value, email_.value, location_name, edit_button]).draw()
  
     ...
   }
  </code></pre>
  <p>I think I know where the problem is but I dont know how to fix it. The <code>edit_admin_object</code> object is defined globally and then each created button is taking the same object. But what else can I actually do in this case?!</p>
  <p>UPDATE:
  I think I have a better clue now of what's wrong. It might be the string syntax when creating a new button.</p>
  <p>New UPDATE.</p>
  <p>I came closer to the problem, now I know for sure the way I am stringifying the object and passing it as parameter is the problem.</p>
  <pre><code>var edit_button = '&lt;button type=&quot;button&quot; id=&quot;buttons&quot; onclick=&quot;edit_admin_request(this,\'' + JSON.stringify(edit_admin_object) + '\')&quot; name=&quot;edit_admin&quot;&gt;Edit&lt;/button&gt;';
  </code></pre>
  <p>P.S. see the syntax changes I made.</p>