Remove/add img based on counter using jQuery
<p>Basically, what I want to do is when a list item is clicked, an image is appended to the images div, and when it is toggled off, to remove the last image from the images div. So the more list item's are added, the more images are in the div. When the list items are all toggled off, the number of images should be reset back to normal.</p>

<p>HTML</p>

<pre><code>&lt;ul id="list"&gt;
  &lt;li&gt;&lt;a href="#"&gt;First&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Second&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Third&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="images"&gt;
  &lt;img src="#" /&gt;
  &lt;img src="#" /&gt;
  &lt;img src="#" /&gt;
  &lt;img src="#" /&gt;
  &lt;img src="#" /&gt;
&lt;/div&gt;
</code></pre>

<p>jQuery</p>

<pre><code>var count = 0;
$('#list a').on("click", function(event){
    count++;
    $(this).parent().toggleClass('added');
    var classname = $(this).parent().toggleClass('added');

    if (classname == '') {
      // remove image
    } else {
      //add image
    }

}
</code></pre>

<p>any ideas?</p>
