معالجة مشكل حذف عنصر إلا بعد تحديث الصفحة (لغة الجافاسكريبت)

قمت بإنشاء popup تحتوي على المنتوجات المفضلة.

يتم جلب هذه المصفوفات من مصفوفة من localStorage.

المشكلة التي واجهتي هو عند الضغط على dislike يقع حذف العنصر لكن عند الضغط ثانية لا يقع الحذف إلا بعد تحديث الصفحة.

الكود:

// show my favorite products
const favorites = document.querySelector(".favorite-products")

favorites.addEventListener('click', ()=>{
    // get liked products from localStorage
    favoriteItems = JSON.parse(localStorage.getItem('favoriteProducts'))

    if(favoriteItems.length != 0){
        // create a popup
        let overlay = document.createElement('div')
        overlay.setAttribute("class", "popup-overlay")
        document.body.appendChild(overlay)
    
        //  styling and draw the popup-overlay
        let favoriteWrapper = document.createElement('div')
        favoriteWrapper.setAttribute("class", "favorite-wrapper")
        overlay.appendChild(favoriteWrapper)

        function drawFavoriteProducts(favorites) {
            let drawFavoriteProducts = favorites.map(favItem => {
                return `
                    <i class="fa-sharp fa-solid fa-circle-xmark closeBtn"></i>
                    <div class="favorite-card">   
                        <p class="dislike" data-click="${favItem.id}">
                            Dislike
                            <i class="fa-regular fa-thumbs-down"></i>
                        </p>
                        <img src="${favItem.img_url}.png" alt="" srcset="">
                        
                        <h2 class="favorite-title">${favItem.title}</h2>
                    </div>
                `
            })
            favoriteWrapper.innerHTML = drawFavoriteProducts.join("")
        }
        drawFavoriteProducts(favoriteItems)

        // remove disliked products
        let disliked = document.querySelectorAll('.dislike')
        disliked.forEach(item =>{
            let dislikeId = item.getAttribute("data-click")
            item.addEventListener('click', ()=>{
                favoriteItems = favoriteItems.filter((data) => data.id != dislikeId)
                localStorage.setItem("favoriteProducts", JSON.stringify(favoriteItems))
                drawFavoriteProducts(favoriteItems)
            })
        })
    }
})

// close popup
document.addEventListener('click', function(e){
    // console.log(e.target.className == "fa-sharp fa-solid fa-circle-xmark closeBtn");
    if (e.target.className == "fa-sharp fa-solid fa-circle-xmark closeBtn") {
        e.target.parentNode.remove()
        document.querySelector('.popup-overlay').remove()
    }
})

يمكنكم الإطلاع على الكود كاملا من خلال الرابط التالي:

https://github.com/Saadaoui-Forkan/Ecommerce-website

شكرا على المساعدة.