Building a self-iterating table in javascript?

In my code I take user inputs, save them and pass them to an API. I then need to output these user inputs to a table. Every time the user presses the button to submit their data, I need a new row of the new user inputs to be added.

I have read up on building tables in javascript, but obviously I am using IDS in my table in order to pass the variable, and am unsure of how to iterate a table that creates with user inputs and also has IDS for the element.

I have found a workaround through html below but it allows limited inputs and is extremely sloppy, I'm sure there is a better way for me to learn.

Many thanks!

Function:

function writeFName() {

var fNameGroup = document.querySelector('#fName_Input').value;
first_name = document.querySelector('#fName_Input').value;

localStorage.setItem('fName-group', fNameGroup);

var cfmF = confirm("Did you mean to enter: \n" + fNameGroup + '?');

if (cfmF) {
    console.log(fNameGroup);
    window.alert('Success!');

    first_name = localStorage.getItem('fName-group');

    document.querySelector("#firstname" + CSS.escape(x)).innerHTML = first_name;
    x++
} else {
    window.alert('Please Re-Enter First Name');
}
}


<div id="outputTable">
<table>
<tr>
<th> First Name </th>hg
<th> Last Name  </th>
<th> Email      </th>
    </tr>
<tr>
<td id="firstname"></td>
<td id="lastname"></td>
<td id="email"></td>
</tr><tr>
<td id="firstname1"></td>
<td id="lastname1"></td>
<td id="email1"></td>
</tr><tr>
<td id="firstname2"></td>
<td id="lastname2"></td>
<td id="email"></td>
</table>