jQuery搞乱css

Question

我的导航栏中有一个购物车图标，如果用户选择＆＃34;添加到购物车＆＃34;，则会显示一个数字。

虽然在加载页面时图标很好，但是当向购物车添加1个项目时，它会生成包含数字项目的购物车和徽章的副本。

if ($totalquantity >= 0) {
    echo '<div class="badge"'.$totalquantity.'">
          <i class="cart-icon" ></i>
          </div>';
} 

jquery的

$('body').on('click', '.addCartButton', function(){
    var index = $(this).data('id');
    var quantity = $(this).siblings('input').val();
    $.ajax ({
        method: 'post',
        url: 'add_to_cart.php?index='+index,
        data: {
            orderQuantity: quantity
        },
        success: function (data) {
            $('.cart-icon').load('badge');          
        }
    })
});

add_to_cart.php

$index = $_GET['index'];

//from product.php
if(isset($_POST['orderQuantity'])){
    $orderQuantity = $_POST['orderQuantity'];

    if(isset($_SESSION['cart'][$index]))
        $_SESSION['cart'][$index] += $orderQuantity;
    else
        $_SESSION['cart'][$index] = $orderQuantity;
}