Using a variable with jQuery addClass()
<p>I'm new to JS and jQuery but I've been trying to use the <code>addClass()</code> and <code>removeClass</code> with some Javascript variables and don't know what I'm doing wrong.</p>

<p>I have this 1–5 star rating system.</p>

<p>I want it to change classes when hovering and save rating when I click.</p>

<p>The HTML looks like this: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="icon-rating-empty" id="blob1"&gt;&lt;/span&gt;</code></pre>
</div>
</div>
</p>

<p>and so on for blobs 2–5.</p>

<p>The JS I currently have is </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var blob1 = document.getElementById('blob1');
var blob2 = document.getElementById('blob2');
var blob3 = document.getElementById('blob3');
var blob4 = document.getElementById('blob4');
var blob5 = document.getElementById('blob5');

var rating = 0;

blob1.addEventListener('hover', function() {
    $(blob1).addClass("icon-rating-full").addClass("green-blob").removeClass("icon-rating-empty")
},
function() {
    $(blob1).addClass("icon-rating-empty").removeClass("green-blob").removeClass("icon-rating-full")
});

blob1.addEventListener('click', function() {
    rating = 1;
});</code></pre>
</div>
</div>
</p>

<p>This doesn't work—I'm sure I don't know how to handle variables with the jQuery, but can't find any article on what I'm supposed to do.</p>

<p>I've tested it and if I use <code>$("#blob1")</code> instead of <code>$(blob1)</code> it works, but I'd like to use the variables because I have more in plan.</p>