jquery dynamic class
<p>I want to add a class based on a predefined variable to a specific id element using jquery. This is what I've tried so far but it's not working. Any help would be apriciated.</p>

<p>This is my HTML:</p>

<pre><code>&lt;div id="test"&gt;THIS TEXT SHOULD BE RED&lt;/div&gt;
</code></pre>

<p>This is my JQUERY</p>

<pre><code>$(document).ready(function(){
  var color = "red";
  $("#test").addClass(color);
};
</code></pre>

<p>This is my CSS</p>

<pre><code>.red {
  color:red;
}
</code></pre>

<p><a href="http://codepen.io/anon/pen/dhKgL" rel="nofollow">View it on codepen</a></p>
