Почему иконка удаления и возможность поставить лайк появляется только после перезагрузки страницы?

export function createCard(cardData, userId, imageCallback) {
  // Клонировать шаблон
  const cardTemplate = document.querySelector('#card-template');
  const clone = cardTemplate.content.cloneNode(true);

  // Установить значения вложенных элементов
  const cardTitle = clone.querySelector('.card__title');
  const cardImage = clone.querySelector('.card__image');
  const cardDelete = clone.querySelector('.card__delete-button');
  const cardLike = clone.querySelector('.card__like-button');
  const likeCount = clone.querySelector('.card__like-cifr');
  
  cardTitle.textContent = cardData.name;
  cardImage.src = cardData.link;
  cardImage.alt = cardData.alt;
  const allLikes = cardData.likes || []; // Проверяем наличие свойства likes и устанавливаем пустой массив по умолчанию, если свойство отсутствует
  likeCount.textContent = allLikes.length;
  
  const CardID = cardData._id;

  if (cardData.owner && cardData.owner._id === userId) {
    cardDelete.style.display = 'block'; // Показываем иконку удаления
  } else {
    cardDelete.style.display = 'none'; // Скрываем иконку удаления
  }

  // Добавить обработчики событий

  // добавить обработчик клика на иконку удаления
  cardDelete.addEventListener('click', (evt) => {
    deleteCard(CardID);
  });

  cardLike.addEventListener('click', (evt) => {
    if (cardLike.classList.contains("card__like-button_is-active")) {
      deleteLike(CardID, cardLike, likeCount);
    } else {
      enterLike(CardID, cardLike, likeCount);
    }
  });

  cardImage.addEventListener('click', () => {
    const link = cardData.link;
    const caption = cardData.name;
    imageCallback(link, caption);
  });

  console.dir(cardData);

  return clone;
}

function deleteCard(id){
  return DeleteCard(id)
  .then (() => {
    const card = document.getElementById(id); // Получаем элемент карточки по ID
    card.remove(); // Удаляем карточку из DOM
  })
  .catch(error => {
    console.error('Ошибка при удалении карточки:', error);
  });
}

function enterLike(id, cardLike, likeCount) {
  return PUTlike(id)
    .then((res) => {
      likeCount.textContent = res.likes.length; // Обновляем количество лайков
      cardLike.classList.add("card__like-button_is-active");
    })
    .catch(error => {
      console.error('Ошибка при постановке лайка:', error);
    });
}

function deleteLike(id, cardLike, likeCount){
  return DeleteLike(id)
    .then((res) => {
      likeCount.textContent = res.likes.length; // Обновляем количество лайков
      cardLike.classList.remove("card__like-button_is-active");
    })
    .catch(error => {
      console.error('Ошибка при удалении лайка:', error);
    });
}

Связь с API

export function SaveCard(name, link){
  return fetch(`${config.baseUrl}/cards`, {
    method: 'POST',
    headers: config.headers,
    body: JSON.stringify({
      name,
      link,
    }),
  })
  .then(res => _getResponseData(res));
}

export function DeleteCard(id){
  return fetch(`${config.baseUrl}/cards/${id}`, {
    method: 'DELETE',
    headers: config.headers,
  })
  .then(res => _getResponseData(res));
}

export function PUTlike(id){
  return fetch(`${config.baseUrl}/cards/likes/${id}`, {
    method: 'PUT',
    headers: config.headers,
  })
  .then(res => _getResponseData(res));
}

export function DeleteLike(id){
  return fetch(`${config.baseUrl}/cards/likes/${id}`, {
    method: 'DELETE',
    headers: config.headers,
  })
  .then(res => _getResponseData(res));
}