Form is not picking up values by querySelector

Question

I have a "piggy bank" project that keeps and withdraws an amount of money passed by two different Foms, but when trying to withdraw, the values are empty as in the example:

{date: "", amount: "", type: "Retirada"}

When saving is saving the values normally:

{date: "2021-02-27", amount: "1", type: "Depósito"}

Essential Code:

Forms:

HTML:

<div class="modal1-overlay">
    <div class="modal1">
        <div id="form">
            <h2>Guardar Dinheiro</h2>
            <form action="" onsubmit="Form.submit(event)" id="form1">
                <div class="input-group">
                    <label class="sr-only" for="amount">Valor à ser guardado</label>
                    <input id="amount" name="amount" type="number" step="0.01" placeholder="Valor à ser guardado" />
                    <small class="helpText">Use a vírgula (,) para casas decimais</small>
                </div>
                <div class="input-group">
                    <label class="sr-only" for="date">Valor à ser guardado</label>
                    <input id="date" name="date" type="date" />
                </div>
                <div class="input-group actions">
                    <a href="#" class="button cancel" onclick="Modals.closeModals('Depósito')">Cancelar</a>
                    <button>Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal2-overlay">
    <div class="modal2">
        <div id="form">
            <h2>Retirar Dinheiro</h2>
            <form action="" onsubmit="Form.submit(event)" id="form2">
                <div class="input-group">
                    <label class="sr-only" for="amount2">Valor à ser guardado</label>
                    <input id="amount2" name="amount2" type="number" step="0.01" placeholder="Valor à ser guardado" />
                    <small class="helpText">Use a vírgula (,) para casas decimais</small>
                </div>
                <div class="input-group">
                    <label class="sr-only" for="date2">Valor à ser guardado</label>
                    <input id="date2" name="date2" type="date" />
                </div>
                <div class="input-group actions">
                    <a href="#" class="button cancel" onclick="Modals.closeModals('Retirada')">Cancelar</a>
                    <button>Retirar</button>
                </div>
            </form>
        </div>
    </div>
</div>

Javascript:

const Form = {
    amount: Modals.modalType == "Retirada" ? document.querySelector('input#amount2') : document.querySelector('input#amount'),
    date: Modals.modalType == "Retirada" ? document.querySelector('input#date2') : document.querySelector('input#date'),

    getValues() {
        return {
            date: this.date.value,
            amount: this.amount.value,
            type: Modals.modalType
        }
    },
    validateField() {
        const {date, amount, type} = Form.getValues()
        if(date.trim() === "" || amount.trim() === "" || type.trim() === "") {
            throw new Error("Por favor, preencha todos os campos!")
        }
    },

    formatValues() {
        let { date, amount, type} = Form.getValues()
        amount = Utils.formatAmount(amount)
        date = Utils.formatDate(date)
        return {date, amount, type}
    },

    clearFieldsForm(){
        Form.amount.value = "";
        Form.date.value = "";
        Modals.modalType = "";
    },

    submit(event) {
        event.preventDefault()
        try {
            console.log(this.getValues())
            // Form.validateField()
            const transaction = Form.formatValues()
            Transaction.add(transaction)
            Modals.closeModals(Modals.modalType)
            Form.clearFieldsForm();            
        } catch (error) {
            Modals.openErrorModal(error.message)
        }
    }
}