<li class="product post-95">
  <h3>Product_01</h3>
  <div class="wishlist_btn_st">+</div>
</li>

<li class="product post-96">
  <h3>Product_01</h3>
  <div class="wishlist_btn_st">+</div>
</li>

<li class="product post-97">
  <h3>Product_01</h3>
  <div class="wishlist_btn_st">+</div>
</li>

<div class="wishlist_new_box"></div>

.product {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  border: solid 1px #ddd;
}
.wishlist_btn_st {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #eee;
}
.btn_added_to_wishlist {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: red;
}
.wishlist_new_box {
  margin: 2rem 0 0 0;
  padding: 1rem;
  background-color: #eee;
}

function wishlistNewSt() {
  // Retrieve wishlist items from sessionStorage
  let wishlistItems = JSON.parse(sessionStorage.getItem('wishlistItems')) || [];

  // Add to wishlist
  let cardBtns = document.querySelectorAll('.wishlist_btn_st');
  let cardBox = document.querySelector('.wishlist_new_box');

  for (let i = 0; i < cardBtns.length; i++) {
    cardBtns[i].addEventListener('click', () => {
      if (cardBtns[i].classList.contains('btn_added_to_wishlist')) {
        alert('Товар уже добавлен в избранное');
      } else {
        let item = cardBtns[i].parentElement;
        cardBtns[i].classList.remove('wishlist_btn_st');
        cardBtns[i].classList.add('btn_added_to_wishlist');
        let clone = item.cloneNode(true);
        cardBox.appendChild(clone);

        // Add the item to the wishlistItems array
        wishlistItems.push(clone.innerHTML);

        // Store the updated wishlistItems in sessionStorage
        sessionStorage.setItem('wishlistItems', JSON.stringify(wishlistItems));
      }
    });
  }

  // Remove from wishlist
let cardBoxItems = document.querySelectorAll('.wishlist_new_box .product');
for (let i = 0; i < cardBoxItems.length; i++) {
  let btnRemove = cardBoxItems[i].querySelector('.btn_added_to_wishlist');
  if (btnRemove) {
    btnRemove.addEventListener('click', () => {
      cardBoxItems[i].remove();
      
      // Find the index of the item in the wishlistItems array
      let itemIndex = wishlistItems.findIndex(item => item === cardBoxItems[i].innerHTML);
      
      // Remove the item from the wishlistItems array
      if (itemIndex !== -1) {
        wishlistItems.splice(itemIndex, 1);
      }

      // Update the stored wishlistItems in sessionStorage
      sessionStorage.setItem('wishlistItems', JSON.stringify(wishlistItems));

      // Reassign the event listener to the updated button elements
      wishlistNewSt();
    });
  }
}

  // Load wishlist items from sessionStorage
  for (let i = 0; i < wishlistItems.length; i++) {
    let item = document.createElement('li');
    item.className = "pif-has-gallery product type-product";
    
    item.innerHTML = wishlistItems[i];
    cardBox.appendChild(item);
  }

  // Add class to buttons of products already in wishlist
  let wishlistButtons = document.querySelectorAll('.wishlist_btn_st');
  for (let i = 0; i < wishlistButtons.length; i++) {
    let item = wishlistButtons[i].parentElement;
    if (wishlistItems.includes(item.innerHTML)) {
      wishlistButtons[i].classList.add('btn_added_to_wishlist');
    }
  }
}

document.addEventListener('DOMContentLoaded', function() {
  wishlistNewSt();
});