make a price reduction form div appear and disappear using a button. but I have several button in 10 card

I have a problem I have several cards wi
on to make a div appear in . They all have the same class but there is only one of my buttons that works on the other cards, it does nothing

<article class="grid-product">
    <div class="grid-items-product">
        <div class="grid-item-product">
            <img src="./images/sucette.jpg" alt="sucette">
        <div class="card-content">
            <button class="control-price" >
                 <i class="fa-sharp fa-solid fa-pen"></i>
            </button>
        <h3>Sucette</h3>
        <span>A partir de <strong id="price-sucette">25 €</strong> </span>
        </div>
        </div>
        <div class="grid-item-product">
            <img src="./images/cannes.jpg" alt="bonbon cannes">
        <div class="card-content">
            <button class="control-price">
                <i class="fa-sharp fa-solid fa-pen"></i>
            </button>
        <h3>Cannes</h3>
        <span>A partir de <strong id="price-cannes">25€</strong> </span>
        </div>
        </div>
        <div class="grid-item-product">
            <img src="./images/ourson.jpg" alt="bonbon oursson">
        <div class="card-content">
        <button class="control-price">
             <i class="fa-sharp fa-solid fa-pen"></i>
        </button>
        <h3>Ourson</h3>
        <span>A partir de <strong id="price-ourson">25€</strong> </span>
        </div>
        </div>
    </div>   
</article>

.form-reduction-price{
    width: 90%;
    background-color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: auto;
    padding-bottom: 25px;
    
}
.btn-closed{
    display: flex;
    align-self:end;
    border: none;
    font-size:16px;
    background: #fff;
}

let promoFormOpen=document.querySelector(".control-price");
promoFormOpen.addEventListener('click',()=>{ 
    document.querySelector ('.form-reduction-price').style.display="flex"        
    });
let closed=document.querySelector(".btn-closed")
     closed.addEventListener('click',()=>{
         document.querySelector('.form-reduction-price').style.display="none";

I have a problem I have several cards wi
on to make a div appear in . They all have the same class but there is only one of my buttons that works on the other cards, it does nothing

document.querySelector will return the first matched element, you might be looking for querySelectorAll with a way to identify each individual "price reduction" element.

So instead you might select all your buttons with:

let promoFormOpenButtons = document.querySelectorAll(".control-price");

Then add your event listeners to every button:

promoFormOpenButtons.forEach(btn => {
btn.addEventListener('click', (e) => {
// do something
});

Full example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let promoFormOpenButtons = document.querySelectorAll(".control-price");
promoFormOpenButtons.forEach(btn => {
btn.addEventListener('click', (e) => {
console.log(e.target.parentElement.querySelector('h3').textContent);
});
});

<!-- language: lang-html -->

<article class="grid-product">
<div class="grid-items-product">
<div class="grid-item-product">
<img src="./images/sucette.jpg" alt="sucette">
<div class="card-content">
<button class="control-price">
<i class="fa-sharp fa-solid fa-pen"></i>
</button>
<h3>Sucette</h3>
<span>A partir de <strong id="price-sucette">25 €</strong> </span>
</div>
</div>
<div class="grid-item-product">
<img src="./images/cannes.jpg" alt="bonbon cannes">
<div class="card-content">
<button class="control-price">
<i class="fa-sharp fa-solid fa-pen"></i>
</button>
<h3>Cannes</h3>
<span>A partir de <strong id="price-cannes">25€</strong> </span>
</div>
</div>
<div class="grid-item-product">
<img src="./images/ourson.jpg" alt="bonbon oursson">
<div class="card-content">
<button class="control-price">
<i class="fa-sharp fa-solid fa-pen"></i>
</button>
<h3>Ourson</h3>
<span>A partir de <strong id="price-ourson">25€</strong> </span>
</div>
</div>
</div>
</article>

<!-- end snippet -->