Да, так можно сделать, есть много способов, вот один из них, суть такая:
Вы вешаете обработчик на все кнопки, потом, когда обрабатываете клик, смотрите откуда пришел этот клик.
Получает элемент и с помощью метода closest находите родителя, в котором лежат скрытые элементы.
И открываете именно их, примерная реализация в коде:
Вёрстка допустим такая:
<div class="wrap">
<h2>Товар 1</h2>
<div class="hide">Это скрыто</div>
<button class="open">Кнопка, которая показывает скрытое</button>
</div>
<div class="wrap">
<h2>Товар 2</h2>
<div class="hide">Это скрыто</div>
<button class="open">Кнопка, которая показывает скрытое</button>
</div>
js:
const btn = document.querySelectorAll('.open');
btn.forEach((item) => {
item.addEventListener('click', (event) => {
const itemWrap = e.currentTarget.closest('.wrap');
const hideElement = itemWrap.querySelector('.hide');
hideElement.style.display = 'block';
// И т.д...
});
});
п.с - есть такое понятие "делегирование", в данном контексте, это когда обработчик вешается не на каждую кнопку, а на общий блок. Но это вам думаю не надо раз всего ~ 20 товаров
