Jquery buttons background color alternate
<p>I have a list of <code>for</code> and <code>against</code> buttons. What i'm trying to do is if <code>for</code> is clicked , the <code>against</code> button for that row has alternate colors.  I've tried to do this with jquery but it isn't working. How do i fix this? Here is the jsfiddle <a href="http://jsfiddle.net/mdanz/9H9qE/1/" rel="nofollow">http://jsfiddle.net/mdanz/9H9qE/1/</a></p>

<pre><code>    &lt;style type="text/css"&gt;
.rate3 {
padding:5px;
font-family:Arial;
color:#FFFFFF;
cursor:pointer;
background-color:red;
border:1px solid #000000;
}

.rate4 {
padding:5px;
font-family:Arial;
color:#FFFFFF;
cursor:pointer;
background-color:red;
border:1px solid #000000;
}

.vote {
height:30px;
width:auto;
margin-bottom:10px;

}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
$('.rate3').live('click',function() {

    $(this).css('background-color','#FFFFFF');
        $(this).css('color','red');
        $(this).parent('div').next('.rate4').css('background-color','red');
        $(this).parent('div').next('.rate4').css('color','#FFFFFF');

}

$('.rate4').live('click',function() {

    $(this).css('background-color','#FFFFFF');
        $(this).css('color','red');
        $(this).parent('div').next('.rate3').css('background-color','red');
        $(this).parent('div').next('.rate3').css('color','#FFFFFF');

}
&lt;/script&gt;
&lt;?php for($i=0;$i&lt;11;$i++) {  ?&gt;
&lt;div class="vote"&gt;&lt;a class="rate3"&gt;For&lt;/a&gt; &lt;a class="rate4"&gt;Against&lt;/a&gt;&lt;/div&gt;

&lt;?php  } ?&gt;
</code></pre>
