title: jquery adding duplicate element
body: <p>I am working on some ajax pagination. I am using the below code:</p>
  
  <pre><code>jQuery(function($) {
  $('#content').on('click', '.woocommerce-pagination a', function(e){
      e.preventDefault();
      var link = $(this).attr('href');
      $('#content').fadeOut(200, function(){
          $(this).load(link + ' #content', function() {
  
              $(this).fadeIn(200);
              $('.products li').css("width","21.05%");
              $('#content').css("width","70%");
          });
      });
  });
  });
  </code></pre>
  
  <p>This works as it should, but for some reason it is adding #content within the original #content div. When i view source it looks like this:</p>
  
  <pre><code>&lt;div id="content" role="main" style="display: block; width: 70%;"&gt;
  &lt;div id="content" role="main"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can anyone see what the problem is?</p>