title: Jquery buttons background color alternate
body: <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>