jQuery: how to add buttons that can in turn add more buttons
<p>I am writing a script that allows users to add friends on a form.  I need to be able to have them add a friend, click an add button button next to the input, add another friend, click the add button next to that input and so on.  I am trying to do that with jQuery, but am stuck.  I achieved this, but my script adds buttons like I want, but it adds inside the original button.  I know it is because I am using "this" in my script, but I can't get it working without this.  If my code is not the way to do this, I am open to other suggestions.  Here is my code, which is wrapped in document.ready higher up in the script:</p>

<pre><code>$("button#add-friend").click(function (e) {
      $(this).trigger('addFriend');
});
$('#add-friend').on('addFriend', function() {
      $(this).append('&lt;input type="text" value="Friend"&gt;&lt;span id="add"&gt;&lt;input type="button" id="add-friend" value="+"&gt;&lt;/span&gt;&lt;br/&gt;');
});
</code></pre>

<p>The HTML is:</p>

<pre><code>&lt;input type="text" value="Friend"&gt;&lt;span id="add"&gt;&lt;input type="button" id="add-friend" value="+"&gt;&lt;/span&gt;
&lt;div id="add-friend"&gt;&lt;/div&gt;
</code></pre>

<p>By the way I am using jQuery 1.7, which has the new "on" syntax.  ".on('click', ... )" is the same as ".click(...)"</p>
