title: How to populate a text area from a dynamically created list
body: <p>I have a list of addresses. Each address has 2 links which allow the user to click to add the address to the collection textarea or to the delivery textarea.</p>
  
  <p>Here is the view</p>
  
  <pre><code>&lt;p&gt;Recent addresses&lt;/p&gt;
  &lt;ul&gt;
      &lt;% @recent_addresses.each do |address| %&gt;
          &lt;li&gt;
              &lt;%= address %&gt;
              &lt;%= link_to 'Add to collection text area', '#', class: 'collection' %&gt;
              &lt;%= link_to 'Add to delivery text area', '#', class: 'delivery' %&gt;
          &lt;/li&gt;
      &lt;% end %&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And here is the equivalent html</p>
  
  <pre><code>&lt;p&gt;Recent addresses&lt;/p&gt;
  &lt;ul&gt;
      &lt;li&gt;
          14 Main road
          &lt;a class="collection" href="#"&gt;Add to collection textarea&lt;/a&gt;
          &lt;a class="delivery" href="#"&gt;Add to delivery textarea&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          22 Main road
          &lt;a class="collection" href="#"&gt;Add to collection textarea&lt;/a&gt;
          &lt;a class="delivery" href="#"&gt;Add to delivery textarea&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>So far I have the following javascript/jquery code </p>
  
  <pre><code>$(function(){
      $(".collection").click(function(e){
          e.preventDefault();
          $( "#collection_address" ).val($(this).text());
      });
  });
  
  $(function(){
      $(".delivery").click(function(e){
          e.preventDefault();
          $( "#delivery_address" ).val($(this).text());
      });
  });
  </code></pre>
  
  <p>I cant figure out how to grab the correct address from the dynamically created list.</p>