Jquery .html() and .attr() to populate P tags
<p>I'm trying to use jquery to populate <code>&lt;p&gt;</code> tags with content based on their class. Here's my code:</p>

<pre><code>&lt;p class="header"&gt;&lt;/p&gt;
&lt;p class="desc"&gt;&lt;/p&gt;
</code></pre>

<pre class="lang-javascript prettyprint-override"><code>var header = 'header content here';
var desc = 'description content here';

var id = $("p").attr("class");

$("p." + id).html(id);
</code></pre>

<p>By using <code>.html(id)</code>, I'm trying to call the content stored in the variables with the same name as the <code>class</code> of the <code>&lt;p&gt;</code> tag. However, this method only returns</p>

<pre><code>&lt;p&gt;header&lt;/p&gt; 
</code></pre>

<p>and</p>

<pre><code>&lt;p&gt;desc&lt;/p&gt; 
</code></pre>

<p>as opposed to pulling the content from the variables.</p>

<p>A point in the right direction would be much appreciated.</p>
