Javascript make modal appear after another modal without refreshing page

Question

I'm trying to make a custom modal appear after the user has clicked the cookie modal on first visit in the following fashion:

User enters site for 1st time > cookie modal appears > if user accepts / configures the modal > 5s delay then show custom modal

I've tried using js-cookie to check if the cookie preference cookie exists or equals 1 but that only works after refreshing the page, getElementsByClassName doesn't work either as its throwing the following error:

Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function

I can't use getElementById as the cookie popup has no editable code or set Id.

I tried using querySelector but also get an error:

Cannot read properties of undefined (reading querySelector)

I tried making a loop checking for the cookie-preference to exist / equal 1 then send the modal but I believe that's far from a good solution.

and the code I have right now:

const cookieAcceptButton = document.document.querySelectorAll("span.js-cookie-accept-all-button");

function showModal() {
  setTimeout(() => {
    $('#myModal').modal();
    Cookies.set('modal-cookie', true, { expires: 30 });
  }, 5000);
}


if (!Cookies.get('modal-cookie') && !Cookies.get('cookie-preference')) {
  cookieAcceptButton.addEventListener('click', function() {
checkConsent();
},{
  once: true
}) 
}

I've edited the code to reflect the suggested answer / duplicate question but it does not solve my issue whatsoever, this is the error I get this time:

(index):4325

   Uncaught TypeError: Cannot read properties of undefined (reading 'querySelectorAll')

as I said I can't use / set an ID to the element and neither of the methods outlined in the "duplicate" work.