Как сделать, чтобы работал во всех картах click?

Question

[Greeg Zagrelov]

Как сделать, чтобы срабатывал click на всех одним кодом а не дублировать его и создавать новые id для каждой карты?

вот таких карт у меня много все один в один , кроме id 
.col-12.col-md-6.col-sm-12.col-lg-6.col-xl-4                   
                            .cardColors#cardColors
                                .d-flex.justify-content-between
                                    h4 Профиль: Brusbox 
                                    span#btnHidden x
                                p   Продукция Rehau обеспечивает плавное открывание, надежное запирание систем, отличается эстетичным дизайном,  доступной ценой, большим сроком службы, высокими качественными характеристиками. Изделия поставляются с гарантией на 10 лет.
                            .cardColors#cardColorsx
                                .d-flex.justify-content-between
                                    h4 Профиль: Brusbox 
                                    span#btnHiddenx x
                                p   Продукция Rehau обеспечивает плавное открывание, надежное запирание систем, отличается эстетичным дизайном,  доступной ценой, большим сроком службы, высокими качественными характеристиками. Изделия поставляются с гарантией на 10 лет.
                            .tabCard
                                h2  Одностворчатое окно
                                .d-flex.justify-content-center
                                    img(src="../assets/img/brusbox/1.png", alt="brusbox")
                                .tabCard-info
                                    h4 Профиль: Brusbox (однокамерный)
                                    .d-flex
                                        .tabCard-info_sub
                                            label.d-flex
                                                input(name="group1" type="radio")
                                                p Цена c <br> фурнитурой Elementis: <br> 182,68 руб
                                        a.btn-floating.btn-large.pulse#btn
                                            span.material-iconsx i
                            
                                        .tabCard-info_border
                                        .tabCard-info_sub.tabCard-info-iformation
                                            label.d-flex
                                                input(name="group1" type="radio") 
                                                p Цена c <br> фурнитурой Roto: <br> 199,48 руб
                                        a.btn-floating.btn-large.pulse#btnx
                                            span.material-icons i                
                                    .d-flex.justify-content-center
                                        button.modal-trigger.mainButtonPrice(data-target='popup-container')
                                            span Заказать замер

const cardColors = document.getElementById('cardColors');
    const btnHidden = document.getElementById('btnHidden');
    const btn = document.getElementById('btn');

    btnHidden.addEventListener('click', () => {
        cardColors.style.opacity = '0';
        cardColors.style.zIndex = '-20';

    })
    btn.addEventListener('click', () => {
        cardColors.style.opacity = '1';
        cardColors.style.zIndex = '50';
    })

Answer 1

[Egor Sabyanin]

const btns = document.querySelectorAll('btn');

for (btn in btns) {
  btn.addEventListener('click', () => {
    // your actions 
  });
}

Answer 2

[Дима Долготер]

можно по классу и использовать querySelectorAll - вернет массив. погугли

Comments

[Greeg Zagrelov]

ага массив а я думаю почему ошибка , спасибо, а то я не селён в js