I have a problem with my JS code. I have two functions similar, and both add a list of specific products in the DOM. Now, I have a loading style that is added when a product is created with the function addDataToHTML, but when a product is created with the function addDataToHTML1, my style loading is not added to the button when it is clicked.Where am I wrong?

// Show product data in the list
function addDataToHTML(products) {
    let listProductHTML = document.querySelector('.listProduct');
    listProductHTML.innerHTML = '';

    if (products != null) {
        products.forEach(product => {
                    let newProduct = document.createElement('div');
                    newProduct.classList.add('item');
                    newProduct.innerHTML =
                        `<img src="${product.image}" alt="">
                <h2>${product.name}</h2>
                <div class="price">${product.price}rsd</div>
                <a style="cursor: pointer" onclick="redirectToDetailsPage(${product.id})">View Details</a><br>
                ${(product.price !== 0 && product.price !== "Upit ") ? `
                <button onclick="addCart(${product.id})">
                    <span class="spann">Dodaj u korpu</span>
                    <div class="cartt">
                        <svg viewBox="0 0 36 26">
                            <polyline points="1 2.5 6 2.5 10 18.5 25.5 18.5 28.5 7.5 7.5 7.5"></polyline>
                            <polyline points="15 13.5 17 15.5 22 10.5"></polyline>
                        </svg>
                    </div>
                </button>` : `
                <button onclick="contactSeller(${product.id})">Kontakt</button>`}`;

            listProductHTML.appendChild(newProduct);

            // Add event listener for the rotation animation
            let button = newProduct.querySelector('button');
            button.addEventListener('click', function() {
                button.classList.add('loading');
                // Remove the class after animation to allow re-triggering the animation on next click
                button.addEventListener('animationend', () => {
                    button.classList.remove('loading');
                }, { once: true });
            });
        });
    }
}

function addDataToHTML1(products) {
    let klimaProductHTML = document.querySelector('.klimaProduct');
    let klimaGreeProductHTML = document.querySelector('.klimaGreeProduct');
    let pumpaProductHTML = document.querySelector('.pumpaProduct');
    let multisplitProductHTML = document.querySelector('.multisplitProduct');
    let precistacProductHTML = document.querySelector('.precistacProduct');

    if (klimaProductHTML) klimaProductHTML.innerHTML = '';
    if (klimaGreeProductHTML) klimaGreeProductHTML.innerHTML = '';
    if (pumpaProductHTML) pumpaProductHTML.innerHTML = '';
    if (multisplitProductHTML) multisplitProductHTML.innerHTML = '';
    if (precistacProductHTML) precistacProductHTML.innerHTML = '';

    if (products != null) {
        products.forEach(product => {
            let categories = Array.isArray(product.category) ? product.category : [product.category];
            
            categories.forEach(category => {
                let newProduct = document.createElement('div');
                newProduct.classList.add('item');
                newProduct.innerHTML =
                    `<img src="${product.image}" alt="">
                    <h2>${product.name}</h2>
                    <div class="price">${product.price}rsd</div>
                    <a style="cursor: pointer" onclick="redirectToDetailsPage(${product.id})">View Details</a><br>
                    ${(product.price !== 0 && product.price !== "Upit ") ? `
                    <button onclick="addCart(${product.id})">
                        <span class="spann">Dodaj u korpu</span>
                        <div class="cartt">
                            <svg viewBox="0 0 36 26">
                                <polyline points="1 2.5 6 2.5 10 18.5 25.5 18.5 28.5 7.5 7.5 7.5"></polyline>
                                <polyline points="15 13.5 17 15.5 22 10.5"></polyline>
                            </svg>
                        </div>
                    </button>` : `
                    <button onclick="contactSeller(${product.id})">
                        <span class="spann">Kontakt</span>
                        <div class="contact">
                            <svg viewBox="0 0 36 26">
                                <!-- SVG content for contact icon -->
                            </svg>
                        </div>
                    </button>`}`;

                switch (category) {
                    case 'klima':
                        if (klimaProductHTML) klimaProductHTML.appendChild(newProduct.cloneNode(true));
                        break;
                    case 'klimaGree':
                        if (klimaGreeProductHTML) klimaGreeProductHTML.appendChild(newProduct.cloneNode
                            (true));
                            break;
                        case 'pumpa':
                            if (pumpaProductHTML) pumpaProductHTML.appendChild(newProduct.cloneNode(true));
                            break;
                        case 'multisplit':
                            if (multisplitProductHTML) multisplitProductHTML.appendChild(newProduct.cloneNode(true));
                            break;
                        case 'precistac':
                            if (precistacProductHTML) precistacProductHTML.appendChild(newProduct.cloneNode(true));
                            break;
                    }
                
                // Dodavanje event listenera za rotacionu animaciju
                let button = newProduct.querySelector('button');
                button.addEventListener('click', function() {
                    button.classList.add('loading');
                    // Uklonite klasu nakon animacije da biste omogućili ponovno pokretanje animacije pritiskom na dugme
                    button.addEventListener('animationend', () => {
                        button.classList.remove('loading');
                    }, { once: true });
                });
            });
        });
    }
}