I am using Bootstrap v5.1.3 with vanilla JavaScript but must have misunderstood how to set up modal event listeners. This is how I have set up them up for two modals:

var firstModal = new bootstrap.Modal(document.getElementById("firstModal"));
var firstModalEL = document.getElementById('firstModal');

firstModalEL.addEventListener('show.bs.modal', function (event) {

    console.log("firstModal");

});
 
var secondModal = new bootstrap.Modal(document.getElementById("secondModal"));
var secondModalEL = document.getElementById('secondModal');

secondModalEL.addEventListener('show.bs.modal', function (event) {

   console.log("secondModal");

});

But when the second modal is shown using

secondModal.show();

the event listener for the first one executes.

Can anyone see where I am going wrong?