document.querySelector keeps returning null in function

I have a span element with an id="edit-..." that is in a card like this. This card is dynamically added to the DOM by the way:

            <div class="d-flex w-100 justify-content-between" style="pointer-events:none;">
            <h5 class="mb-1" style="pointer-events:none;">${post.creator}</h5>
            <small>Likes <span id="like-count-${post.id}" class="badge badge-primary badge-pill" style="pointer-events:none">${post.likes}</span></small>
            </div>
            <p class="mb-1" style="pointer-events:none;">${post.content}</p>
            <div class="d-flex w-100 justify-content-between" style="pointer-events=none;">
            <small>${post.created}&#8287&#8287<span id="edit-${post.id}">&#8226 EDIT</span></small>
            <div name="like-btn" id="${post.id}">
            </div>
            </a>   

When I try to access that span element directly from the console like below it works perfectly fine:

> document.querySelector('span[id="edit-4"]')

or I even tried out this and it still worked:

> const tweet = 4
> document.querySelector(`span[id="edit-${tweet}"]`)

However, when I try and do it from a function and print to console it keeps returning null and I cannot understand why?

function editButton(creator, post){
    const currentUser = document.querySelector('#signed-in-user').innerText;
    const tweet = post
    
    if(creator != currentUser){
        const editBtn = document.querySelector(`span[id="edit-${tweet}"]`);
        console.log(document.querySelector(`span[id="edit-${tweet}"]`));
        console.log("Post (" + post + "): " + creator + " does not match logged in user");
    }
}

I even added this extra line to my function:

console.log(`edit-${tweet}`)

to see if tweet was returning the number correctly and it is. Can anyone see what's going on here?