title: Create unique buttons dynamically
body: <p>I'm new to jQuery and am trying to create jQuery UI buttons dynamically and them to a list. I can create one list item but no more are appended after it. What am I doing wrong?</p>
  
  <pre><code>$('#buttonList').append('&lt;li&gt;&lt;button&gt;'+ username + '&lt;/button&gt;')
         .button()
         .data('type', userType)
         .click(function(e) { alert($(this).data('type')); })
  .append('&lt;button&gt;Edit&lt;/button&gt;&lt;/li&gt;');
  
  &lt;div&gt;
      &lt;ul id="buttonList"&gt;    
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This only creates one list item with two buttons (although the second button seems to be encased in the first one, but I can probably figure that issue out). How do I get it to create multiple list items with their own unique 'data' values (i.e. I can't do a <code>find()</code> on a particular button class and give it data values as all buttons would then have the same data)?</p>