How to add class in jquery to already loaded content?
<p>My requirement is on clicking a (+) button, the rows in the table should keep adding. which i have already achieved using the below given code. Also when clicking the "Remove" button,the corresponding row gets deleted. Both functionalities r wrking fine. The Problem is when the last row is removed, &amp; when the "(+)" button is clicked, the rows do not increase, bcoz of the removeClass function. Kindly can anyone help how to chk that the row deleted is the last row and how to addClass to the previous row. The codings r given below. Kindly help to resolve this issue.   Iam a fresher in coding, pls highlight if any mistakes r there in the codings.  Thanks in advance..</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="jquery-1.7.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready( function() {
id=1;
$('#butVal').click(function(){


        var master = $(this).parents("#table-2");
        id++;   
        var sample = master.find('.tabRow').clone();    
        sample.attr("id", id + "item"); 
        master.find('.tabRow').removeClass();
        master.find('tbody').append(sample);
        //alert(master);
        //alert(sample);
        //alert(sample.html());
      //alert(master.html());

var rowLen =  $('#table-2 &gt; tbody &gt;tr').length;

//alert(rowLen);
if(rowLen&gt;9)
{
alert("no of row is reached 10");
}


   }

);

$('table#table-2 button.remove').live('click', function(){

var rem =$(this).parents('tr').remove();
} );


});

//jquery ends here
&lt;/script&gt;

&lt;style type="text/css"&gt;
.add select
{
width:100%;
}
&lt;/style&gt;
&lt;body&gt;



&lt;table id="table-2" class="add" border ="1"&gt;

&lt;thead&gt;
&lt;!-- &lt;tr&gt;&lt;td&gt;&lt;button id="butVal"&gt;Click&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt; --&gt;
&lt;tr&gt;&lt;th&gt; S.No&lt;/th&gt;&lt;th&gt; Product Status &lt;/th&gt; &lt;th&gt; Stock Status&lt;/th&gt; &lt;th&gt; Description&lt;/th&gt; &lt;th&gt; Quantity &lt;/th&gt; &lt;th&gt; Price &lt;/th&gt; &lt;th&gt;  Total &lt;/th &gt;
&lt;th&gt; &lt;button id="butVal"&gt; + &lt;/button&gt;&lt;/th&gt;&lt;/tr&gt; 
&lt;/thead&gt;

&lt;tbody&gt;
&lt;tr class="tabRow" id="1item"&gt;
&lt;td&gt; &lt;input type="text" name="sno"/&gt; &lt;/td&gt;
&lt;td&gt;&lt;select&gt;&lt;option&gt; New &lt;/option&gt;&lt;option&gt; Old &lt;/option&gt;&lt;/select&gt; &lt;/td&gt;
&lt;td&gt;&lt;select&gt;&lt;option&gt; In Stock &lt;/option&gt;&lt;option&gt; Out Of Stock &lt;/option&gt;&lt;/select&gt; &lt;/td&gt;
&lt;td&gt; &lt;input type="text" name="desc"/&gt;  &lt;/td&gt;
&lt;td&gt; &lt;input type="text" name="qty"/&gt; &lt;/td&gt;
&lt;td&gt; &lt;input type="text" name="price"/&gt; &lt;/td&gt;
&lt;td&gt; &lt;input type="text" name="total"/&gt; &lt;/td&gt;
&lt;td&gt;&lt;button class="remove"&gt;Remove&lt;/button&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;

&lt;tfoot&gt;
&lt;tr&gt;

&lt;td&gt; &amp;nbsp; &lt;/td&gt;
&lt;td&gt; &amp;nbsp; &lt;/td&gt;
&lt;td&gt; &amp;nbsp; &lt;/td&gt;
&lt;td&gt; &amp;nbsp; &lt;/td&gt;
&lt;td&gt; &amp;nbsp; &lt;/td&gt;
&lt;td&gt; Grand Total &lt;/td&gt;
&lt;td&gt; &amp;nbsp; &lt;/td&gt;
&lt;td&gt; &lt;center&gt;  &lt;/center&gt; &lt;/td&gt;


&lt;/tr&gt;
&lt;/tfoot&gt;

&lt;/table&gt;


&lt;/div&gt;







&lt;/body&gt;






&lt;/html&gt;
</code></pre>
