I want to make a function when i click on the "heartBtn" it turns red and be added to the array "productsInFavArr" and when i click again the heart turns grey again and remove the product from the "productsInFavArr"

allProducts

let products = [
    {
        title: "Sunglasses",
        imgURL: "images/Products/sunglasses.jpg",
        desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla adipisci fugiat pariatur recusandae repudiandae fuga molestias doloremque itaque obcaecati.",
        price:80,
        id: 1
    },
    {
        title: "Laptop",
        imgURL: "images/Products/laptop.jpg",
        desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla adipisci fugiat pariatur recusandae repudiandae fuga molestias doloremque itaque obcaecati.",
        price:100,
        id: 2
    },
    {
        title: "Microphone",
        imgURL: "images/Products/mic.jpg",
        desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla adipisci fugiat pariatur recusandae repudiandae fuga molestias doloremque itaque obcaecati.",
        price:75,
        id: 3
    },
    {
        title: "Cat",
        imgURL: "images/Products/cat.jpg",
        desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla adipisci fugiat pariatur recusandae repudiandae fuga molestias doloremque itaque obcaecati.",
        price:200,
        id: 4
    },
]

functions

// Draw Product UI
function drawProductUI(array){
    var productsUI = array.map((item) => {        
        if (productsInFavArr) {
            for (const favProd of productsInFavArr){
                    if (favProd.id === item.id) {
                        // console.log(favProd);
                    return `
                <div class="product-item"> 
                <div class="product-img-container">
                <img src=${item.imgURL} alt="products" class="product-img" width="100%" height="150px">
                </div>
                <div class="product-text">
                    <h2 class="product-title">${item.title}</h2>
                    <span class="product-desc">${item.desc}</span>
                    <p class="product-price">USD ${item.price}</p>
                </div>
                <div class="product-btns">
                    <button class="add-to-cart">Add To Cart</button>
                    // here is the btn (the class heart-icon-red the style is a red heart so if it exist in the productsInArr when user reload its a red heart )
                    <button class="heart-btn heart-icon-red" onclick="removeItemFromFav(${item.id})"><i class="far fa-heart"></i></button> 
                </div>
                </div>
                `;
                }
        }}
        return`
        <div class="product-item"> 
            <div class="product-img-container">
                <img src=${item.imgURL} alt="products" class="product-img" width="100%" height="150px"> 
            </div>
            <div class="product-text">
                <h2 class="product-title">${item.title}</h2>
                <span class="product-desc">${item.desc}</span>
                <p class="product-price">USD ${item.price}</p>
            </div>
            <div class="product-btns">
                <button class="add-to-cart">Add To Cart</button>
                // here is the btn (the class heart-icon the style is a grey heart so if it  doesnt exist in the productsInArr when user reload its a grey heart )
                <button class="heart-btn heart-icon" ><i class="far fa-heart"></i></button>
            </div>
        </div>
        `
    
    
    });
        productsContainer.innerHTML = productsUI.join("");    
    }

window.onload = drawProductUI(allProducts)

// Favorite Function

for(let f=0; f < heartBtn.length; f++){
    heartBtn[f].addEventListener("click" ,()=>{
        let clicked = false
        if (!clicked) {
            clicked=true
            productBtns[f].innerHTML=`
            <button class="add-to-cart">Add To Cart</button>
            <button class="heart-btn heart-icon-red" ><i class="far fa-heart"></i></button>
            `
            console.log("add");
            console.log(allProducts[f]);
        }else{
            clicked=false
            productBtns[f].innerHTML=`
            <button class="add-to-cart">Add To Cart</button>
            <button class="heart-btn heart-icon" ><i class="far fa-heart"></i></button>
            `
        }

        console.log(allProducts[i]);
        addToFavorites(allProducts[f]);

        function addToFavorites(product){
            if (localStorage.getItem("userValidate") && localStorage.getItem("passValidate")) {
                let productsInFavObj = localStorage.getItem("productsInFavObj");
                productsInFavObj = JSON.parse(productsInFavObj);
                if(productsInFavObj != null){
        
                        if(productsInFavObj[product.id] == undefined){
                            productsInFavObj = { 
                                ...productsInFavObj,
                                [product.id] : product
                                }
                            
                        }
        
                    
            
                }else{
                    productsInFavObj = {
                        [product.id] : product
                    }
            }
            let productsInFavArr = Object.values(productsInFavObj)
        
            localStorage.setItem("productsInFavArr" , JSON.stringify(productsInFavArr) )
            localStorage.setItem("productsInFavObj" , JSON.stringify(productsInFavObj) )
            // updateCartTotal()
        
            }else{
                window.location.href = "login.html";
            }
        
        }
    }) 
}

// Remove from Favorite

function removeItemFromFav(id){

    for(let f=0; f < heartBtn.length; f++){
        // heartBtn[f].addEventListener("click" ,()=>
        let productsInFavArr = localStorage.getItem("productsInFavArr")
        if(productsInFavArr){
            let items = JSON.parse(productsInFavArr);
            console.log("removed item:",allProducts[f]);
            let filteredItems = items.filter((item) => item.id !== id);
            localStorage.setItem("productsInFavArr" , JSON.stringify(filteredItems));        
            localStorage.setItem("productsInFavObj" , JSON.stringify(filteredItems) )
            // drawProduct(allProducts)
            console.log(filteredItems);
            if(filteredItems.length==0){
                localStorage.removeItem("productsInFavArr")
                localStorage.removeItem("productsInFavObj")
            }
        }
    }
}