Повторное использование js функции

У меня есть несколько одинаковых div выполняющих запрос данных с API цель заменить название div при нажатии.

<div style="cursor: pointer;" class="asdescshowcountries" onclick="toggleElem(&quot;res_&quot;);">Показать</div>
<div style="cursor: pointer;" class="asdescshowcountries" onclick="toggleElem(&quot;res_1538&quot;);">Показать</div>

Я использовал данный js и он работает, но только по одному из div

document.querySelector('.asdescshowcountries')
.addEventListener('click', function(){
this.textContent = this.textContent == 'Показать' ? 'Скрыть' : 'Показать';
});

<div style="cursor: pointer;" class="asdescshowcountries" onclick="toggleElem(&quot;res_&quot;);">Показать</div>
<div style="cursor: pointer;" class="asdescshowcountries" onclick="toggleElem(&quot;res_1538&quot;);">Показать</div>

Подскажите что я делаю не так ?