I want to save data from cards. I am saving data from card inputs with contain the same name. Cards added dynamically. querySelectorAll contains data from first card only without data from dynamically added cards.

Selecting cards

document.querySelectorAll('.card').forEach((card) => {
        
        let term = card.querySelector('input[name="term"]').value.trim();
        let definition = card.querySelector('input[name="definition"]').value.trim();
        if (term && definition) {
            cards.push({Term: term, Definition: definition});
        }
    })

View

        <form asp-controller="Cards" asp-action="Create" method="post" class="cards">
            <div class="card mt-6" id="card">
                <div class="header d-flex justify-content-between p-3">
                    <h4 class="card-counter">1</h4>
                </div>
                <div class="card-body row">
                    <div class="term col">
                        <h3>Term</h3>
                        <input class="form-control w-100" name = "term" >
                    </div>
                    <div class="definition col">
                        <h3>Definition </h3>
                        <input class="form-control w-100" name = "definition"  >
                    </div>
                </div>
            </div>

            <input type="submit" value="Create" id="create-cards" class="btn btn-primary mt-2"/>
        </form>
        <button class="new-card w-100 d-flex justify-content-center align-items-center mt-4 mt-s rounded-2" style="height: 5rem"  type="button">
            <h3>+ Add card</h3>
        </button>

Function adding new Cards

function addCard() {

    currentCardNumber++;
    let newCardHTML = `
                    <div class="header d-flex justify-content-between p-3">
                        <h4 class="card-counter">${currentCardNumber}</h4>
                    </div>
                    <div class="card-body row">
                        <div class="term col">
                            <h3>Term</h3>
                            <input class="form-control w-100" name = "term" >
                        </div>
                        <div class="definition col">
                            <h3>Definition </h3>
                            <input class="form-control w-100" name="definition" >
                        </div>
                    </div>
            </div> `;
    let newCard = document.createElement('div');
    newCard.classList.add('card');
    newCard.classList.add('mt-3');
    newCard.innerHTML = newCardHTML;

    let addNewCard = document.querySelector('.cards');
    let referenceNode = document.getElementById('create-cards');
    addNewCard.insertBefore(newCard, referenceNode);
    saveCardsHTML();
    updateCounter();

}
document.addEventListener('DOMContentLoaded', function () {
    let newCard = document.querySelector('.new-card');
    newCard.addEventListener('click', function () {
        addCard();
    });
});

I believe the issue may be related to the addition of dynamic cards.