querySelectorAll doesn’t select all objects

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('.cards').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() {

    let termInput = document.querySelector('.term input');
    let definitionInput = document.querySelector('.definition input');

    /*    const cardData = {
            Term: termInput.value.trim(),
            Definition: definitionInput.value.trim(),
        };*/
    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.