Jquery click events not firing / distingishing between two identical HTML blocks
<p><a href="http://www.mobal.com/worldphone/indexa.php" rel="nofollow">Heres my page.</a></p>

<p>If you find the red 'Special Offer' box, you'll see it expands when its header is clicked. There is another identical box at the bottom of the page. If you click that one too, you'll see my problem. The click event is firing both boxes. This was an oversight. My problem is that I cannot seem to get my alternative JS to work. I thought I could just use the next('div ') method (commented out in code sample)  to locate the div and expand it. This doesn't seem to work.</p>

<p>Heres my current JS that fires the two boxes simultaneously:</p>

<pre><code>//=====Special Offer Expanders START=====
        $('a.expand-offer').click(function(event){
            event.preventDefault();
            //$('a.expand-offer').next('div').slideToggle(200);
            $('div.offer-expander').slideToggle(200);
        });
//=====Special Offer Expanders END===== 
</code></pre>

<p>Can anyone see a way of distinguishing between the two duplicate boxes in the JS so that they expand independently from one another? I considered adding '.top' and '.bottom' classes to the markup, but this is messy as I want to be able use the Special Offer Markup in a generic way, without adding unique classes. </p>
