adding and removing dynamic textboxes
<p>I have the following code that adds a text area to my page.  It also appends a 'remove' button so that the user can remove a text area.  The problem is, the text areas are removed when the user clicks the remove button AND anywhere in the text area...I am not sure why this is happening.</p>

<p>Can someone take a quick look at my code?  Maybe I am missing something.</p>

<p>Thanks!</p>

<pre><code>$("#btnAddTools").click(function () {
        if(counter&gt;10){
            alert("Only 10 learning Tools allowed per page.");
            return false;
        }   

        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Tools' + counter);
        newTextBoxDiv.after().html(
              "&lt;label&gt;&lt;/label&gt;" +
              "&lt;textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'&gt;&lt;/textarea&gt;" +

              '&amp;nbsp;&amp;nbsp;&lt;input type="button" value="Remove" class="removeTools"&gt;').click(function () {
                   $(this).remove();
                   counter--;
                });
        newTextBoxDiv.appendTo("#ToolsGroup");
        counter++;
    });
</code></pre>
