title: Jquery, add buttons under elements, and remember which element the button belongs to
body: <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>