Why don't .remove and .removeClass work?

Question

JavaScript

Hello!
Faced the following problem

. There is a count variable, which is responsible for the number of items in the cart.
If count == 0, then with the help of .append the "Take All" button is displayed, if count =! 0, the "Delete All" button is displayed:

$(".item").click(function(){ // при клике на товар
if(count == 0){
  $('.buttondiv').html(''); // очищаем блок buttondiv
  $('.buttondiv').append('<span id="add">Take All</span>'); // добавляем в него спан "Забрать все"
}
if(count != 0){
  $('.buttondiv').html(''); // очищаем блок buttondiv
  $('.buttondiv').append('<span id="remove">Clear</span>'); // добавляем в него спан "Удалить все"
}
});

$("#remove").click(function(){
  // код //
  console.log('Удалено');  // пример
});
$("#add").click(function(){
  // код //
  console.log('Добавлено');  // пример
});

With this code, the buttons change, depending on the number of items in the cart, but the buttons do not work.
If you initially add Take All to html, without any conditions and replacements, then the function will work. Tell me what the problem is

. I believe that this is due to the fact that new tags for adding and deleting products appear, and jq on the already "modified" page cannot find these spans

Answer 1

The simplest solution would be to "add handlers" to the body of the function.