title: Duplicate last table row but change class in jquery
body: <p>I have the following question.</p>
  
  <p>I have a table, like the example below. The plan is to copy a row but not with a new class. The class should change in a remove class. Example in jsfiddle: <a href="http://jsfiddle.net/klaas3/wgRYR/" rel="nofollow">http://jsfiddle.net/klaas3/wgRYR/</a> The goal is to keep the last row always green and the others red.</p>
  
  <pre><code>&lt;table class="test"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;td&gt;header 1&lt;/td&gt;
          &lt;td&gt;header 2&lt;/td&gt;
          &lt;td&gt;header 3&lt;/td&gt;
          &lt;td&gt;header 4&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr class="1"&gt;
          &lt;td&gt;data 1&lt;/td&gt;
          &lt;td&gt;data 2&lt;/td&gt;
          &lt;td&gt;data 3&lt;/td&gt;
          &lt;td class="remove"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="2"&gt;
          &lt;td&gt;data 1&lt;/td&gt;
          &lt;td&gt;data 2&lt;/td&gt;
          &lt;td&gt;data 3&lt;/td&gt;
          &lt;td class="remove"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="new"&gt;
          &lt;td&gt;data 1&lt;/td&gt;
          &lt;td&gt;data 2&lt;/td&gt;
          &lt;td&gt;data 3&lt;/td&gt;
          &lt;td class="new"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>I use the last column(with the new and remove class or red and green colors) as a button.</p>
  
  <p>I have the following allready, but something seems to go wrong:</p>
  
  <pre><code>$("table.test tr.new:last td.new").click(function(){
  $('table.test tr.new:last  td.new').removeClass('new').addClass('remove').fadeIn("fast");
  $('table.test tr.new:last').clone(true).insertAfter('table.test tr.new:last');
  });
  </code></pre>
  
  <p>Mind you, I am not a very experienced jquery user. Also when the cell class is changed I will change the table row class as well with a db id. (But that I will try myself with a working sample).</p>