El primer botón con la clase="nuevoSalon" funciona bien el problema esta en el segundo con la clase="nuevoSalon2" ahí no me abre el modal. He intentado dejar el mismo nombre de la clase y utilizar el mismo código del JS pero tampoco ha sido posible. Dejo las secciones del html y el código del JS que he utilizado.
html
<a href="#" class="nuevoSalon"> Nuevo Salón</a>
<a class="iconoAccionEditar nuevoSalon2"
href="Controlador?menu=Salones&accion=Cargar&id=<%=salon.getNombre_salon()%>"><i class="fas fa-edit"></i> Editar</a>
Javascript
let cerrar = document.querySelectorAll(".close")[0];
let cerrar2 = document.querySelectorAll(".cancelarNuevoSalon")[0];
let abrir = document.querySelectorAll(".nuevoSalon")[0];
let abrir2 = document.querySelectorAll(".nuevoSalon2")[0];
let modal = document.querySelectorAll(".modal")[0];
let modalC = document.querySelectorAll(".modal-container")[0];
abrir.addEventListener('click',function(e){
e.preventDefault();
modalC.style.opacity = "1";
modalC.style.visibility = "visible";
modal.classList.toggle("modal-close");
});
abrir2.addEventListener('click',function(e){
e.preventDefault();
modalC.style.opacity = "1";
modalC.style.visibility = "visible";
modal.classList.toggle("modal-close");
});
cerrar.addEventListener("click",function () {
modal.classList.toggle("modal-close");
setTimeout(function () {
modalC.style.opacity = "0";
modalC.style.visibility = "hidden";
},1000)
})
cerrar2.addEventListener("click",function () {
modal.classList.toggle("modal-close");
setTimeout(function () {
modalC.style.opacity = "0";
modalC.style.visibility = "hidden";
},1000)
})
window.addEventListener("click",function(e) {
console.log(e.target)
if(e.target == modalC){
modal.classList.toggle("modal-close");
setTimeout(function () {
modalC.style.opacity = "0";
modalC.style.visibility = "hidden";
},1000)
}
})