title: On click get list p contents and display in a div
body: <p>Having a little trouble with jQuery, please help.</p>
  
  <p>I need to grab the contents of p class="area-desc when class="caption is clicked and display it in class="step-area.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;ul id="main-areas" class="group"&gt;
                  &lt;li&gt;
                      &lt;div class="build-area"&gt;
                          &lt;span class="caption bg"&gt;Planning&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;p class="area-desc"&gt;1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a accumsan dolor. Curabitur rutrum augue nec eros blandit egestas. Aliquam lobortis posuere facilisis. Integer rutrum ullamcorper erat ac tempor. Nulla nec sapien nibh, non consequat dui.&lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div class="build-area"&gt;
                          &lt;span class="caption bg"&gt;Arcitecture&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;p class="area-desc"&gt;2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a accumsan dolor. Curabitur rutrum augue nec eros blandit egestas. Aliquam lobortis posuere facilisis. Integer rutrum ullamcorper erat ac tempor. Nulla nec sapien nibh, non consequat dui.&lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div class="build-area"&gt;
                          &lt;span class="caption bg"&gt;Interior Design&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;p class="area-desc"&gt;3Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a accumsan dolor. Curabitur rutrum augue nec eros blandit egestas. Aliquam lobortis posuere facilisis. Integer rutrum ullamcorper erat ac tempor. Nulla nec sapien nibh, non consequat dui.&lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div class="build-area"&gt;
                          &lt;span class="caption bg"&gt;Construction&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;p class="area-desc"&gt;4Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a accumsan dolor. Curabitur rutrum augue nec eros blandit egestas. Aliquam lobortis posuere facilisis. Integer rutrum ullamcorper erat ac tempor. Nulla nec sapien nibh, non consequat dui.&lt;/p&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="step-area bg"&gt;
  
              &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('span.caption').click(function() {
          var step = $('p.area-desc').html();
          $('.step-area').html("&lt;p&gt;" + step + "&lt;/p&gt;");
      });
  </code></pre>
  
  <p>At the moment all that code does is grabs the contents of the first p tag and displays it in the desired div.</p>
  
  <p>What I need is a way of showing each description in .step-area on every click.</p>