Как сделать, чтобы при нажатии на кнопку в каждой карточке отдельно показывалась информация?

столкнулся с проблемой при верстке, инфа открывается либо только в одном блоке (в случае, если использую querySelector) либо не открывается вообще (если использую querySelectorAll)

добавлю только 3 карточки, на самом деле их больше. Нужно, чтобы у каждой открывался текст отдельно при нажатии на кнопку

html

        <div class="container">
            <div class="menu-holder">
                <div class="menu-cotegory">
                    <div class="menu-text">Шаурма</div>
                    <div class="menu-items">
                        <div class="menu-item">
                            <div class="item-img">
                                <img src="img/shawarma1.png" alt="">
                            </div>
                            <div class="item-text">Шаурма Большая</div>
                            <div class="item-subtext">Курица или свинина на выбор, соусы <br> и добавки на выбор</div>
                            <div class="compound">
                                Состав: шашлык люля кебаб из фарша <br> говядины и баранины (150 г) на углях, <br> шашлычный салат
                                с луком, соус.
                            </div>
                            <div class="waight">Вес: 315 г.</div>
                            <div class="item-price">320₽</div>
                            <div class="item-btns">
                                <button class="order">Заказать</button>
                                <button class="add-info">
                                    <img src="img/add-info-btn.png" alt="">
                                </button>
                            </div>
                        </div>
                        <div class="menu-item">
                            <div class="item-img">
                                <img src="img/shawarma1.png" alt="">
                            </div>
                            <div class="item-text">Шаурма Большая</div>
                            <div class="item-subtext">Курица или свинина на выбор, соусы <br> и добавки на выбор</div>
                            <div class="compound">
                                Состав: шашлык люля кебаб из фарша <br> говядины и баранины (150 г) на углях, <br> шашлычный салат
                                с луком, соус.
                            </div>
                            <div class="waight">Вес: 315 г.</div>
                            <div class="item-price">320₽</div>
                            <div class="item-btns">
                                <button class="order">Заказать</button>
                                <button class="add-info">
                                    <img src="img/add-info-btn.png" alt="">
                                </button>
                            </div>
                        </div>
                        <div class="menu-item">
                            <div class="item-img">
                                <img src="img/shawarma2.png" alt="">
                            </div>
                            <div class="item-text">Шаурма Стандартная</div>
                            <div class="item-subtext">Курица или свинина на выбор, соусы <br> и добавки на выбор</div>
                            <div class="compound">
                                Состав: шашлык люля кебаб из фарша <br> говядины и баранины (150 г) на углях, <br> шашлычный салат
                                с луком, соус.
                            </div>
                            <div class="waight">Вес: 315 г.</div>
                            <div class="item-price">320₽</div>
                            <div class="item-btns">
                                <button class="order">Заказать</button>
                                <button class="add-info">
                                    <img src="img/add-info-btn.png" alt="">
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

css

.menu-holder {
    margin-top: 128px;
}

.menu-text {
    font-family: "Roboto", sans-serif;
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 32px;
    margin-top: 56px;
}


.menu-items {
    display:flex;
    justify-content: center;
    gap: 32px;
}

.item-text {
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    font-weight: 500;
    margin-top: 24px;
    margin-bottom: 32px;
}

.item-subtext {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color:#33333380;
    margin-top: 8px;
}

.waight {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color:#33333380;
    margin-top: 8px;
}

.item-price {
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    font-weight: 500;
    margin-top: 16px;
}

.item-btns {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    justify-content: space-between;
}

.order {
    background-color: #C9D646;
    border: none;
    border-radius: 16px;
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: white;
    padding: 16px 103px;
    transition: background-color 0.2s linear;
}

.order:hover {
    background-color:#b0bb3a
}

.add-info {
    padding: 12px;
    border: 2px #3333331A solid;
    border-radius: 16px;
    margin-left: 8px;
    background-color: white;
    transition: background-color 0.2s linear;
}

.add-info:hover {
    background-color: #d6d6d6;
}

.compound {
    background-color: #F4F4F4;
    border-radius: 16px;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #33333380;
    padding: 16px;
    margin-top: 8px;
    display: none;
}

js

const addCompoundBtn = document.querySelectorAll('.add-info')
const compound = document.querySelector('.compound')
addCompoundBtn.addEventListener('click', showComppound)



function showComppound() {
    if (compound.style.display == 'none') {
        compound.style.display = 'block'
        addCompoundBtn.style.transform = 'rotate(180deg)'
    } else {
        compound.style.display = 'none'
        addCompoundBtn.style.transform = 'none'
    }
}

showComppound()