Jquery, add buttons under elements, and remember which element the button belongs to
<p>Please check out my code here</p>

<p><a href="http://jsfiddle.net/bYDPr/20/" rel="nofollow">http://jsfiddle.net/bYDPr/20/</a></p>

<p>So I have some HTML textarea elements</p>

<pre><code>&lt;textarea id="area11ba" class="showEditor"&gt;1&lt;/textarea&gt;&lt;br/&gt;
&lt;textarea id="area22ab" class="showEditor"&gt;2&lt;/textarea&gt;&lt;br/&gt;
&lt;textarea id="area33cd" class="showEditor"&gt;3&lt;/textarea&gt;&lt;br/&gt;
&lt;textarea id="area4fg"&gt;4&lt;/textarea&gt;&lt;br/&gt;
&lt;textarea id="area55ed" class="showEditor"&gt;5&lt;/textarea&gt;&lt;br/&gt;
</code></pre>

<p>And I wanna add an "Editor" button under each textarea that has "showEditor" class, then when people click on the Editor button, it should alert the content of that textarea.</p>

<p>Here is my attempt</p>

<pre><code>$("textarea[class*='showEditor']").each(function(index) {

    textareaid = $(this).attr('id');
    buttonId = "editorButton" + index;
    editorButton = '&lt;div class="editorButton"&gt;&lt;a id="' + buttonId + '"&gt;Editor&lt;/a&gt;&lt;/div&gt;';
    $(editorButton).insertAfter(this);

    that = this;

    $('#' + buttonId).click(function() {
        content = $('#'+ textareaid ).val();
        alert(content);
    });


});
</code></pre>

<p>But unfortunately the alerted value is always 5, which is the last defined element.</p>

<p>How can this be done properly?</p>

<p>Thanks</p>
