Acting on cloned() jQuery element
<p>I have cloned some pagination using jQuery's <em>clone()</em> method. When I am attempting to show the current page number (<em>addClass('active')</em>) the behaviour is only occuring on the cloned version of the element. Can anybody help? </p>

<pre><code>$(document).ready(function() {
 $('table.paginated').each(function() {
  var currentPage = 0;
  var numPerPage = 10;
  var $table = $(this);
  var repaginate = function() {
  $table.find('tbody tr').hide()
   .slice(currentPage * numPerPage,
    (currentPage + 1) * numPerPage)
   .show();
     };
  var numRows = $table.find('tbody tr').length;
  var numPages = Math.ceil(numRows / numPerPage);
  var $pager = $('&lt;div class="pager"&gt;&lt;/div&gt;');
   for(var page = 0; page &lt; numPages; page++) {
     $('&lt;span class="page-number"&gt;&lt;/span&gt;').text(page + 1)
  .bind('click', {newPage: page}, function(event) {
   currentPage = event.data['newPage'];
   repaginate();
   $(this).addClass('active')
    .siblings().removeClass('active');
  }).appendTo($pager).addClass('clickable');
 }
 $pager.insertBefore($table).clone(true).insertAfter($table)
  .find('span.page-number:first').addClass('active');
 });
});
</code></pre>
