Карточка не удаляется из корзины (вишлиста) и local storage после обновления страницы?

Такая проблема. Вишлист работает нормально, данные в сторэдж записываются/удаляются, с карточками тоже все норм, но только до обновления страницы: карточка из вишлиста не удаляется, запись из локал сторэдж тоже. Я подозреваю, что проблема в том что после обнавления страницы на кнопку удаления не падает слушатель? Как это лучше реализовать? Или может проблема не в этом?

document.addEventListener('DOMContentLoaded', () => {
  let wishlist = [];

  function setup() {
    const products = document.querySelectorAll(".like-button");
    for (let i = 0; i < products.length; i++) {
      products[i].onclick = function(e) {
        addItem(e);
      }
    }
  }

  function addItem(e) {
    var productId = e.target.getAttribute("id");
    if (!wishlist.find(item => item === productId)) {
      console.log("Product Added, id:", productId);
      const productDiv = document.getElementById("product" + productId);




      const wishDiv = document.createElement("li");
      wishDiv.setAttribute("id", "wish" + productId);
      wishDiv.setAttribute("class", "product");
      wishDiv.innerHTML = productDiv.innerHTML;

      const removeBtn = document.createElement("button");
      removeBtn.setAttribute("class", "button-delete-card");
      removeBtn.textContent = 'x';
      removeBtn.onclick = function() {
        removeItem(productId)
      };

      wishDiv.appendChild(removeBtn);
      wishDiv.insertBefore(removeBtn, wishDiv.firstElementChild);

      let aside = document.getElementById("wishlist");
      aside.appendChild(wishDiv)
      updateStorage()
    }
    wishlist.push(productId);
  }
  $(window).load(function() {
    const initialState = () => {
      if (localStorage.getItem('products') !== null) {
        let wishL = document.getElementById("wishlist")
        wishL.innerHTML = localStorage.getItem('products');
      }
    };




    initialState();
  })


  const updateStorage = () => {
    let wishL = document.getElementById("wishlist");
    let html = wishL.innerHTML; // console.log(wishL);
    html = html.trim(); //  console.log(html);
    if (html.length) {
      localStorage.setItem('products', html);
    } else {
      localStorage.removeItem('products');
    }
  }

  function removeItem(productId) {
    const product = document.getElementById("wish" + productId);
    console.log('Product Deleted, id:', productId)
    product.remove();
    updateStorage();
    wishlist = wishlist.filter(item => item !== productId);
  }

  window.addEventListener("load", setup)

});

HTML

Список

<ul id="wishlist">
  ...
</ul>

карточка до добавления в вишлист

<li id="product1">
  <picture>
    <a href="1.html">
      <img src="1.jpg" /></a>
    <div class="like-button" id="1">
      <button id="1" class="like-button-button"><img src="images/like.png" class="pnglike"></button>
    </div>
  </picture>

</li>

Запись в local storage (после добавления карточки)

<li id="wish2" class="product">
  <button class="button-delete-card">x</button>
  <picture>
    <a href="1.html">
      <img src="1.jpg"></a>
    <div class="like-button" id="2">
      <button id="2" class="like-button-button"><img src="images/like.png" class="pnglike"></button>
    </div>
  </picture>
</li>