several elements with same class name, I want to change only the one I'm clicking
<p>I want to change the background image of only the class that I click on but the same class name is applied 5 times.  I want the arrow to point up if the link is 'Hide' and down if the link is 'Show' Here is the jQuery I'm using....</p>

<p>I'll add the first half the jQuery that is actually doing the hiding of the 'tr's</p>

<pre><code>/* This script collapases and expands the portlet table */
$('table.summary_content_table tr.totalRow').click( function() {
$(this).nextAll('tr').each( function() {
if ($(this).hasClass('totalRow')) {
    return false;
}
    $(this).toggle(50);     
});

/* This script sets the link to say 'Hide' or 'Show' as appropriate */
if ($(this).find('td span.clickme').html()== ('Hide')) {
    $(this).find('td span.clickme').html('Show');
    **$(this).parent().next('.clickme')**.css('background-image', 'url(images/arrows/arrow-nav-down-slate.png)');
} else {
    $(this).find('td span.clickme').html('Hide');
    **$(this).parent().find('.clickme')**.css('background-image', 'url(images/arrows/arrow-nav-up-slate.png)');                         
}
});
</code></pre>

<p>and here is the html table.....</p>

<pre><code>&lt;table class="summary_content_table"&gt;
&lt;tbody&gt;
    &lt;tr class="totalRow"&gt;
        &lt;td colspan="2"&gt;&lt;span class="clickme"&gt;Hide&lt;/span&gt;&lt;strong&gt;TEXT&lt;/strong&gt;&lt;/td&gt;
        &lt;td class="lt"&gt;0&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td  class="totalSubRow" colspan="2"&gt;text&lt;/td&gt;
        &lt;td class="lt"&gt;$0&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="totalRow"&gt;
        &lt;td colspan="2"&gt;&lt;span class="clickme"&gt;Hide&lt;/span&gt;&lt;strong&gt;TEXT&lt;/strong&gt;&lt;/td&gt;
        &lt;td class="lt"&gt;0&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td  class="totalSubRow" colspan="2"&gt;text&lt;/td&gt;
        &lt;td class="lt"&gt;$0&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="totalRow"&gt;
        &lt;td colspan="2"&gt;&lt;span class="clickme"&gt;Hide&lt;/span&gt;&lt;strong&gt;TEXT&lt;/strong&gt;&lt;/td&gt;
        &lt;td class="lt"&gt;0&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td  class="totalSubRow" colspan="2"&gt;text&lt;/td&gt;
        &lt;td class="lt"&gt;$0&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="totalRow"&gt;
        &lt;td colspan="2"&gt;&lt;span class="clickme"&gt;Hide&lt;/span&gt;&lt;strong&gt;TEXT&lt;/strong&gt;&lt;/td&gt;
        &lt;td class="lt"&gt;0&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td  class="totalSubRow" colspan="2"&gt;text&lt;/td&gt;
        &lt;td class="lt"&gt;$0&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="totalRow"&gt;
        &lt;td colspan="2"&gt;&lt;span class="clickme"&gt;Hide&lt;/span&gt;&lt;strong&gt;TEXT&lt;/strong&gt;&lt;/td&gt;
        &lt;td class="lt"&gt;0&lt;/td&gt;    
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td  class="totalSubRow" colspan="2"&gt;text&lt;/td&gt;
        &lt;td class="lt"&gt;$0&lt;/td&gt;    
    &lt;/tr&gt;      
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>and here is the css...</p>

<pre><code>table.summary_content_table td span.clickme {
padding: 0 19px 0 0;
float: right;
font-weight: bold;
cursor: pointer;
background: `#FFF url(../images/arrows/arrow-nav-up-slate.png) no-repeat right;
</code></pre>

<p>}</p>

<p>I tried several approaches including what I've found <a href="http://stackoverflow.com/questions/841553/jquery-this-child-selector">here</a> and <a href="http://stackoverflow.com/questions/1783466/how-to-stop-jquery-affecting-all-elements-when-i-only-want-one-element-to-change">here</a>, but I can't seem to single out one of the links.  When I click them ALL of the arrows point up and if I click it again ALL of the arrows point down.  I want ONLY the link I clicked to change background image.</p>

<p>Thank you for any suggestions.</p>
