Dúvida criação de sistema de carrinho de compras

Estou criando um sistema de carrinho de compras para um site de e-commerce ficticio, porém estou com um problema. Eu consegui fazer que todo produto que eu clico é adicionado ao cart(array), porém, ele não está pegando os valores dos produtos, e sim sempre o valor 13, que é do primeiro produto da lista.

Eu tentei fazer dois forEach, mas não deu certo.

let product = document.querySelectorAll(".icone");
let cartTotal = document.querySelector(".icone-login");
let productPrice = document.querySelector("#price");


cartTotal = [];

product.forEach(iconCart => {
    iconCart.addEventListener("click", function(event){
        event.preventDefault();

         let price = document.getElementById("price");
        cartTotal.push(parseFloat(price.innerText.replace("R$", "")));
        console.log(cartTotal);


    });

});

HTML

<div class="container">

    <div class="produto">
            <a href="" class="icone"></a>
            <div id="produto-background"></div>
            <p></p>
            <p id="price">R$13.00</p>
        </div>

            <div class="produto">
                <a href="" class="icone"></a>
                <div id="produto-background"></div>
                <p></p>
                    <p id="price">R$5.00</p>
            </div>

        <div class="produto">
            <a href="" class="icone"></a>
            <div id="produto-background"></div>
            <p></p>
                <p id="price">R$25.00</p>
        </div>

        <div class="produto">
            <a href="" class="icone"></a>
            <div id="produto-background"></div>
            <p></p>
                <p id="price">R$50.00</p>
        </div>

        <div class="produto">
            <a href="" class="icone"></a>
            <div id="produto-background"></div>
            <p></p>
                <p id="price">R$18.00</p>
        </div>

        <div class="produto">
            <a href="" class="icone"></a>
            <div id="produto-background"></div>
            <p></p>
                <p id="price">R$36.00</p>
        </div>

        <div class="produto">
            <a href="" class="icone"></a>
            <div id="produto-background"></div>
            <p></p>
                <p id="price">R$66.00</p>
        </div>

        <div class="produto">
            <a href="" class="icone"></a>
            <div id="produto-background"></div>
            <p></p>
                <p id="price">R$21.00</p>
        </div>

        <div class="produto">
            <a href="" class="icone"></a>
            <div id="produto-background"></div>
            <p></p>
                <p id="price">R$41.00</p>
        </div>


    </div>