Using each() not working in this simple example
<p>I am trying to understand how to use jquery's each(), because what I tried so far is not working.</p>

<p>In my example I am trying to use <code>.each()</code> to add a border to the <em>first element</em> when any 'special' div is clicked. The next time a 'special' div is clicked, add a border to the <em>second</em> 'special' element. Third time any 'special' div is clicked add a border to the <em>third element,</em> etc...</p>

<p>JS</p>

<pre><code>$.each(function(i) {
     $('.special').click(function(){
         $('.special[i]').css('border','2px solid red');
     }
     i++;
});
</code></pre>

<p>HTML </p>

<pre><code>    &lt;div class="special"&gt;fooft1&lt;/div&gt;
    &lt;div class="special"&gt;fooft2&lt;/div&gt;
    &lt;div class="special"&gt;fooft3&lt;/div&gt;
    &lt;div class="special"&gt;fooft4&lt;/div&gt;
    &lt;div class="special"&gt;fooft5&lt;/div&gt;
    &lt;div class="special"&gt;fooft6&lt;/div&gt;
</code></pre>
