how to use module factory to create objects and manipulate the dom in javascript?

I have this html code

<label for="AccountName">Account Name:</label>
        <input type="text" id="mytext"  >
        <label for="Deposit">Deposit: </label>
        <input type="text" class="deposit" id="deposit">
        <button type="submit" id="createAccount" onclick="createAccount()">Create new Account</button>
        <textarea name="mytextarea" id="mytextarea" cols="140" rows="20"></textarea> 

that I want to get values from the input fields and construct account object from it and add objects to accountInfoList which is a list. And finally I want to update the content of mytextarea with the accountInfoList. Sample run looks like this
sample output

The javascript code I wrote is

    var  accountInfoList = ();

const makeCounter = function(){
    let name = document.getElementById('mytext').value;
    let balance = document.getElementById('deposit').value;

    function createAccount(AccountName, AccountBalance){
        this.AccountName = AccountName;
        this.AccountBalance = AccountBalance;
    }

    var account = createAccount(name, balance);

    accountInfoList.push(account);

}

// document.getElementById('createAccount').onclick = createAccount;

function createAccount(){
    makeCounter();
    // console.log(account1);
    // const account2 = makeCounter(a)
    // accountInfoList.push(account1);
    console.log(typeof accountInfoList)
    for(var i = 0; i < accountInfoList.length; i++){
        console.log("Account Name: "  + accountInfoList(i).AccountName + "Balance: " + accountInfoList(i).balance);
    }
    // document.getElementById('mytextarea').value = accountInfoList(0).name;

}

which doesn’t seem to be working. Any idea is appreciated.