title: Jquery: change colour to table row when select option is changed not working multiple table rows?
body: <p>Right, i have got a table, with two rows. In the right cell i have a drop down menu with the values (1, 2 and 3).</p>
  
  <p>Depending on with is selected i want the table row its in to change a specific colour. I have managed to get this to work when i have one table row and it works fine changing between values. However when i copy my code to make multiple lines it stops workin.</p>
  
  <p>with multiple rows, if i click value 2 on the first it changes the first row too the correct colour, then if i change the value say on row 5, no matter what value i choose it will change to the colour of the first row i changed. If that makes sense.</p>
  
  <p>Heres the code......</p>
  
  <p>-</p>
  
  <p>CSS</p>
  
  <pre><code>&lt;style&gt;
  table td,th{ 
      border:1px solid black; 
      padding-left:100px; 
  }
  
  
  table tr{ 
      background-color:red;
  } 
  .online{ 
      background-color:green;
  }
  .offline{ 
      background-color:red;
  }
  .paused{ 
      background-color:orange;
  }
  &lt;/style&gt;      
  </code></pre>
  
  <p>-</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;table id="table"&gt;
  &lt;tr style="background-color:grey;"&gt;
      &lt;th&gt;
      Hello
      &lt;/th&gt;
  
      &lt;th&gt;
      Is it
      &lt;/th&gt;
  &lt;/tr&gt;   
  
  &lt;tr class="options"&gt;
      &lt;td&gt;
      yayaya
      &lt;/td&gt;
      &lt;td&gt;
      &lt;select id="select"&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
          &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;option value="3"&gt;3&lt;/option&gt;
      &lt;/select&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  
  
  
  &lt;tr class="options"&gt;
      &lt;td&gt;
      yayaya
      &lt;/td&gt;
      &lt;td&gt;
      &lt;select id="select"&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
          &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;option value="3"&gt;3&lt;/option&gt;
      &lt;/select&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>-</p>
  
  <p>JQUERY</p>
  
  <pre><code>&lt;script&gt;
  $('select').change(function(){ 
      if($('select').val() == "2"){ 
                  $(this).parents('.options').removeClass('online');
                  $(this).parents('.options').removeClass('offline');
                  $(this).parents('.options').removeClass('paused');
          $(this).parents('.options').addClass('online'); 
      }else if($('select').val() == "1"){
                  $(this).parents('.options').removeClass('online');
                  $(this).parents('.options').removeClass('offline');
                  $(this).parents('.options').removeClass('paused');
           $(this).parents('.options').addClass('offline'); 
      }else if($('select').val() == "3"){
                  $(this).parents('.options').removeClass('online');
                  $(this).parents('.options').removeClass('offline');
                  $(this).parents('.options').removeClass('paused');
           $(this).parents('.options').addClass('paused'); 
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>here it is on jsfiddle so that you can see what i mean.</p>
  
  <p><a href="http://jsfiddle.net/n3nFB/1923/" rel="nofollow">http://jsfiddle.net/n3nFB/1923/</a></p>
  
  <p>try it with one row and then copy and past the same row underneath </p>