JavaScript function inside eventListener only firing on second click

function modalHandler(doc)
{
    if (doc.exists) 
    {
        let item = Item.parseDocToItem(doc);
        if (item) 
        {
            let order = new Order(item);
            console.log(order);
            drawOrderModal(order);
        } 
        else
        {
            console.log("Cannot parse - item empty");
        };
    } 
    else
    {
        console.log("No such document.");
    };
}

getItemFailureHandler(reason)
{
    console.log("Unable to retrieve itemID from firestoreStock, reasaon: " + reason)
}

function clickHandler(event)
{
    let itemID = event.target.parentElement.parentElement.parentElement.getAttribute("data-id");
    console.log(itemID + "button clicked");

    firestoreStock.doc(itemID).get().then(
        function(doc) {modalHandler(doc)},
        function(reason) {getItemFailureHandler(reason)}
    );
}


/** 
 * Creates item objects from Firestore docs; 
 * adds item objects to stockItemsArray; 
 * draws item objects on store page;
 * attaches event listeners to all `${.buyButton}`.
 */
Stock.shared.addItemsToStock()
    .then( () => 
    {
        Stock.shared.drawSTOREitems();
        Stock.shared.drawItemModals();
        // event listeners for buyNow buttons
        const buyNowBtns = document.querySelectorAll(".buyButton");
        buyNowBtns.forEach(btn => {
            btn.addEventListener("click", function(event) {clickHandler(event)} );
        });
    })
    .catch( err => {
        // display error message to users
        let errorMessageDiv = document.createElement("div");
        let errorMessage = document.createElement("p");
        errorMessage.textContent = "There was a problem loading store stock. We are working to fix this. Please come back again later.";
        clothesRack.appendChild(errorMessageDiv);
        errorMessageDiv.appendChild(errorMessage);
        console.log(err);
    });