Add an item to <ul> onClick when classes are the same
<p>I am trying to create a favourites feature (similar to the star on the left of this post here on StackOverflow) where when a user clicks on an element another element within that class will be added to a list, the main complication is that all the div's have the same class but different content.</p>

<p>So when you click on <code>.mydiv</code> the number from the respective span class should be added as a <code>&lt;li&gt;</code> to the <code>&lt;ul&gt;</code>. As an added bonus it would be great if the opposite was true too, ie clicking the div again removes the item from the <code>&lt;ul&gt;</code></p>

<p>HTML:</p>

<pre><code>&lt;div class="mydiv" &gt; &lt;span class="number"&gt;1&lt;/span&gt; This is first div with same id. &lt;/div&gt;
&lt;div class="mydiv" &gt; &lt;span class="number"&gt;2&lt;/span&gt; This is second div with same id. &lt;/div&gt;
&lt;div class="mydiv" &gt; &lt;span class="number"&gt;3&lt;/span&gt; This is third div with same id. &lt;/div&gt;
&lt;ul id="favourites" &gt; &lt;/ul&gt;​
</code></pre>

<p>jQuery:</p>

<pre><code>$('.mydiv').click(function() {
  $('#favourites').append('&lt;li&gt;' + text + '&lt;/li&gt;');
});  ​
</code></pre>

<p><a href="http://jsfiddle.net/uv25u/" rel="nofollow">http://jsfiddle.net/uv25u/</a></p>

<p><strong>EDIT: I have just noticed that if two span's have the same number then you can not favourite them individually, ie. the script gets confused and thinks both divs are the same since they have the same span number, is there a solution to maintain this same functionality even when two span numbers are the same?</strong></p>

<p>eg. Can we get it to work if the HTML was this:</p>

<pre><code>&lt;div class="mydiv" &gt; &lt;span class="number"&gt;1&lt;/span&gt; This is first div with same id. &lt;/div&gt;
&lt;div class="mydiv" &gt; &lt;span class="number"&gt;2&lt;/span&gt; This is second div with same id. &lt;/div&gt;
&lt;div class="mydiv" &gt; &lt;span class="number"&gt;2&lt;/span&gt; This is third div with same id. &lt;/div&gt;
&lt;ul id="favourites" &gt; &lt;/ul&gt;​
</code></pre>

<p>p.s. if the script also automatically added a new span to the added <code>&lt;li&gt;</code> which when clicked remove the <code>&lt;li&gt;</code> from the list that would be brilliant, is this possible?</p>

<p>Many thanks</p>
