I am fairly new to writing code in general. it's only been a year since I started.

I have a website the pulls a pageant from firestore. If the pageant has different categories, it will display the categories allowing the client to choose the category first before displaying the candidates for that category.

The problem that I have is that when clicking on the category, the alert fires but the actual function is ignored. This only happens on IOS.

I have tried multiple solutions on here.

Added cursor:pointer.

added role="button" when I used a div first instead of a button.

I tried .on('click', and so on).

I tried .click().

I tried wrapping it $(document).ready().

This one is static <div id="main-content-container" class="main-content-container"></div>

const mainContentContainer = document.getElementById('main-content-container');

renderPageant()
async function renderPageant() {
    let html = `
        <div id="render-candidates-container" class="render-candidates-container"></div>
    `
    mainContentContainer.innerHTML = html;

    const renderCandidatesContainer = document.getElementById('render-candidates-container');

    const doc_1 = await db.collection('Pageants').doc(value).get();
    const category = doc_1.data().isCategory
    if(category == true) {
        const querySnapshot = await db.collection('Pageants').doc(value).collection('Categories').get();
        $('#render-candidates-container').empty();
        
        console.log(querySnapshot.size)
        querySnapshot.forEach((doc_2) => {
            const button = document.createElement('button');
            button.setAttribute('id', doc_2.id + '-category-image');
            button.setAttribute('class', 'cursorPointerClass')
            button.innerHTML = `
                <img src="${doc_2.data().categoryBanner}" alt="category banner">
            `
            renderCandidatesContainer.insertBefore(button, renderCandidatesContainer.childNodes[3]);

            const categoryImage = document.getElementById(doc_2.id + '-category-image');
            categoryImage.addEventListener('click', function() {
                alert('Fired!')
                var x = {
                    pageantID: doc_1.id,
                    categoryID: doc_2.id,
                    category: true,
                    ovarallVotes: doc_1.data().overallVotes
                }
                timerCandBlock(x);
            }) 
        })
        return
    }

    var x = {
        pageantID: doc_1.id,
        categoryID: 'undefined',
        category: false,
        ovarallVotes: doc_1.data().overallVotes
    }
    timerCandBlock(x);            
    return
}

timerCandBlock(x); works fine since it actually works when in Chrome PC or Chrome Android. It even works when in inside Facebook in-app browser. But it just does not work when in IOS.

What am I missing here?