Keep Coding

I'm quite new to jQuery. I am building a shopping cart and trying to delete products from a cart. If I have one item in the basket and then remove it, it will disappear, but if I add another item to the cart, the item I deleted will reappear. If I have a card with more than one object, when I attempt to delete it, it will only change the total.
$('.addToCart').click(function(){
var id = this.id;
var price = parseFloat($('#priceAdd-'+id).val()).toFixed(2);;
var name = $('#name-'+id).val();
var total =(parseFloat($('#total').text())+parseFloat(price)).toFixed(2);
cartSize++;
$('#product-'+id).fadeOut('fast');
$('#added-'+id).delay(500).fadeIn('fast');
$.ajax({
type: "POST",
url: 'resources/addToCart.php',
data: { itemId: id , name: name, price: price},
cache: false,
success: function(html){
$("ol").append(html).slideDown("slow");
$('#noItems').fadeOut('fast');
$('#total').html(total);
$('#mainCart').fadeIn('fast');
}
});
});
$('ol').on("click",'.del',function(e){
var id= e.target.id;
var productId = $('#productId-'+id).text();
var productPrice = $('#price-'+id).text();
var total = $('#total').text();
var newPrice = (parseFloat(total) - parseFloat(productPrice)).toFixed(2);
var dataString = 'id='+ id;
cartSize--;
alert(id);
$('#total').html(newPrice);
$("#cart-"+id).remove();
$.ajax({
type: "POST",
url: "resources/del.php",
data: { id: id },
cache: false,
success: function(html){
$('#added-'+productId).fadeOut('Fast');
$('#product-'+productId).delay(600).fadeIn('Fast');
if(cartSize == 0){
$('#noItems').fadeIn('Fast');
$('#mainCart').fadeOut('Fast');
}
}
});
return false;
});
Any input would be appreciated
Thank you
edit: is there anyone else who can help me?

I think when you are calling to "resources/del.php", this is not deleting the item in Server (only visually) and then when you add another with "resources/addToCart.php", this is returning ALL the items (even the one you think you remove)