jQuery to remove from the DOM more than one occurence of an element
<p>Here in this piece of Jquery I am showing active_user_table at the same place where earlier reg_user_table was displayed. So first I am making reg_user_table display none and next I setting active_user_display as block. Afterwards I am issuing getJSON which is working fine. Problem is when the table is attached and when I want to attach the class active_table on all tables so that I could count all the tables and allow only one of it to be seen and remove or detach the others from DOM. I am not able to do so the class active_table is applied to all but the last one. The recently added is not showing the class active_table.</p>

<pre><code> $('#reg_user_table').hide();
 if($('#active_user_table').is(':hidden')){   
     $('#active_user_table').css("display","block");
     $.getJSON("/siteadmin/active_user_count", function(response_data)
     { 
         var data = [response_data.today,response_data.Sevendays,response_data.Month];
         var caption = ['Active Today','Active Past 7 Days','Active This Month'];
         var $table = $('&lt;table/&gt;'); 

         for(var i = 0; i&lt;3; i++) { 
             $table.append('&lt;tr&gt;&lt;td&gt;&lt;h3&gt;'+caption[i]+':'+'&lt;/h3&gt;&lt;/td&gt;&lt;td&gt;&lt;h3&gt;'+ data[i] + '&lt;/h3&gt;&lt;/td&gt;&lt;/tr&gt;');
         } 
         $('#active_user_table').append($table);
     });

     $('#active_user_table').children().addClass("active_table");
     console.log("Hello World!" + $('.active_table').length); 
}
</code></pre>
