modal.classList.remove('hidden') is not working.
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const closeBtn = document.querySelector('.close');
const showBtns = document.querySelectorAll('.show-modal');
for (let i = 0; i < showBtns.length; i++) {
showBtns[i].addEventListener('click', function () {
console.log('Button Clicked');
modal.classList.remove('hidden');
console.log(modal.classList);
});
}.hidden {
display: none;
}<input type="button" class="show-modal" value="Show">
<div class="modal hidden">This is .modal</div>Your script works nicely removing class hidden after the first click. But if you want to show the hidden element again after a second click you have to use toggle instead of remove to restore the .hidden class, hiding it again.
See documentation
EDIT: In my example, I also replace the button's value according to the class. See the line
showBtns[i].value = (modal.classList.contains('hidden')) ? "Show" : "Hide";
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const closeBtn = document.querySelector('.close');
const showBtns = document.querySelectorAll('.show-modal');
for (let i = 0; i < showBtns.length; i++) {
showBtns[i].addEventListener('click', function () {
console.log('Button Clicked');
modal.classList.toggle('hidden');
showBtns[i].value = (modal.classList.contains('hidden')) ? "Show" : "Hide";
console.log(modal.classList);
});
}.hidden {
display: none;
}<input type="button" class="show-modal" value="Show">
<div class="modal hidden">This is .modal</div>