Проблема с высветлением popUP'a

Есть JS код, который при нажатие на кнопку открывает попап на странице. Есть проблема, что имея одинаковые id идентификаторы, при нажатии открывает только 1 попап, который первый, остальные не открывает.

<div class="card filter etyl_spirt">
                    <p class="top_desc">
                        Текст
                    </p>
                    <h3 class="product__title">
                        Текст
                    </h3>
                    <p class="count">
                        1 литр
                    </p>
                    <div class="card__content">
                        <img src="img/aceptolin.png" alt="">
                        <p class="card__text">
                            Текст
                        </p>
                        <a href="#" class="btn btn__our_prod" id="button">
                            Заказать
                        </a>
                    </div>
                </div>
                <div class="card filter etyl_spirt">
                    <p class="top_desc">
                        Текст
                    </p>
                    <h3 class="product__title">
                        Текст
                    </h3>
                    <p class="count">
                        Текст
                    </p>
                    <div class="card__content">
                        <img src="img/aceptolin.png" alt="">
                        <p class="card__text">
                            Текст
                        </p>
                        <a href="#" class="btn btn__our_prod"  id="button">
                            Заказать
                        </a>
                    </div>
                </div>


document.getElementById('button').addEventListener('click', function(){
        document.querySelector('.bg_modals').style.display = 'flex';
    })
    document.querySelector('.close').addEventListener('click', function(){
        document.querySelector('.bg_modals').style.display = 'none';
    })