title: Update Cart count with AJAX success - WordPress
body: <p>In my custom WordPress theme, I placed my Cart icon in the <code>header.php</code>, where with other things I placed it in an <code>&lt;li class="user-cart"&gt;</code>. I placed the db Query within this <code>&lt;li&gt;</code> and with the "Add to Cart" button I'm trying to <strong>reload the <code>&lt;li&gt;</code></strong> so that it can query again and show the updated count of the products added.</p>
  
  <p>On AJAX success I can do it using:</p>
  
  <pre><code>success: function (data) {
     $('.user-cart').load(window.location.href + ' .user-cart');
  }
  </code></pre>
  
  <p>When I'm clicking on the Add to Cart button, it's reloading the <code>&lt;li&gt;</code> with the update <code>count()</code>, but it's taking another <code>&lt;li&gt;</code> within the parent <code>&lt;li&gt;</code>, like:</p>
  
  <pre><code>&lt;li class="user-cart"&gt;
     &lt;li class="user-cart"&gt;
        &lt;a href="/view-cart"&gt;&lt;span class="user-cart-icon"&gt;&lt;/span&gt;&amp;nbsp;15&lt;/a&gt;
     &lt;/li&gt; &lt;!-- cloned li --&gt;
  &lt;/li&gt; &lt;!-- parent or original li --&gt;
  </code></pre>
  
  <p>But the good part is that, the cloned <code>&lt;li&gt;</code> loads only once, on the first click after a page reload, then all the count comes within the second <code>&lt;li&gt;</code>.</p>
  
  <p>What's the wrong part in my code? I don't want any duplicate <code>&lt;li&gt;</code> &mdash; just want to reload the <code>&lt;li class="user-cart"&gt;</code>.</p>