Passing a variable to a dialog box

Passing a variable to a dialog box

I need to pass a variable to a dialog box. Since I couldn't find a proper way how to do this, I decided to use the dialog title to store the variable. The problem is, that I can't read the right ID-value which is read from the button's ID. 
Have a look at this code to understand the problem. If you click on either button, you still get the ID-value of the first button.

Btw, is there an other way to pass variables to a dialog box?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
  7. <style type="text/css">body{font-size:62.5%;}label,input{display:block;}</style>
  8. </head>
  9. <body>
  10. <ul>
  11. <li>nr_4121<br /><button id="nr_4121" class="tell-a-friend">Send by email</button></li>
  12. <li>nr_4122<br /><button id="nr_4122" class="tell-a-friend">Send by email</button></li>
  13. </ul>

  15. <script type="text/javascript">
  16. $(function() {
  17. $("#dialog-form").dialog({
  18. autoOpen: false,
  19. modal: true,
  20. open: function() {
  21. var nr = $("button").attr("id");
  22. $("#dialog-form").dialog("option", "title", nr);
  23. },
  24. buttons: {
  25. 'Send email': function() {},
  26. Cancel: function() {$(this).dialog('close');}
  27. },
  28. close: function() {
  29. }
  30. });

  32. $('.tell-a-friend')
  33. .button().click(function() {
  34. $('#dialog-form').dialog('open');
  35. });
  36. });
  37. </script>

  39. <div id="dialog-form">
  40. <form><label for="name">Name</label>
  41. <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
  42. <label for="email">Email</label>
  43. <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
  44. </form>
  45. </div>
  46. </body>
  47. </html>

Any help would be really appreciated.