Stored data but can't retrieve it !!

Stored data but can't retrieve it !!

Hello,
 
I am new to JQuery, I am trying to create a page that builds an array of objects, the objects are converted to HTML tags where I add Data and on click, I try to read the Data but it doesn't work!!
 
Could you please have a look and tell me where I go wrong or any advice to improve this code ?
 
Thanks for any help.
Claude
:-)
 
 
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta name="description" content="" />
 <meta name="keywords" content="" />
 <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
 
 <script type="text/javascript">
  function Command( name, onClickCallback) {
   this.name = name;
   this.Button = $("<span class=\"button\">" + name + "</span>");










   $.data(this.Button, "name", this.name);
   this.Button.click(onClickCallback);
  }
  Command.prototype.Button = function () {
   return this.Button;
  }

  function BuildCommands(onClickCallback, $Container) {
   var commands = new Array();
   commands.push(new Command("Applications", onClickCallback));
   commands.push(new Command("Areas", onClickCallback));


   for (var i = 0; i < commands.length; i++) {
    $Container.append(commands[i].Button);
   }

   return commands;
  }
 </script>

 <script type="text/javascript">
  $(document).ready(function () {
   BuildCommands(Button_OnClick, $("#boxCommands"));
  });


      function Button_OnClick(eventArg) {
       var sSuffix = $.data(this, "name");
      }
 </script>
</head>
<body>
 <div id="boxCommands"></div>
</body>
</html>