I have a HTML page with a form and a table. In a js file I have a list of objects (JSON) and with this list I populate the table when the page loads.

The form should allow me to add an element to the list and then display it as a new row in the table.

This is my js file:

var data = [
    {
        "first_name": "John",
        "last_name": "Smith",
        "email": "john.smith@gmail.com",
        "job": "CEO",
        "agree": true
    },
    {
        "first_name": "Marie",
        "last_name": "Curie",
        "email": "marie.curie@gmail.com",
        "job": "Researcher",
        "agree": true
    }];
populateTable();
function populateTable() {
    var out = "<table><tr>"
        + "<th>First Name</th><th>Last Name</th>"
        + "<th>Email</th>"
        + "<th>Job</th><th>Agree</th></tr>";
    var i;
    for (i = 0; i < data.length; i++) {
        out += '<tr><td>' + data[i].first_name + '</td><td>' + data[i].last_name + '</td><td>'
            + data[i].email + '</td><td>' + data[i].job + '</td><td>' + data[i].agree + '</td></tr>';
    }
    document.getElementById("showData").innerHTML = out;
};

function collectData(){
    var TestName = document.getElementById("fname").value;
    var TestSurname = document.getElementById("lname").value;
    var TestEmail = document.getElementById("email").value;
    var TestJob = document.getElementById("job").value;
    var TestAgree = document.getElementById("agree_terms").value;
    
    //insert this data on JSON file
    var jsonObject = {
        "first_name": TestName, 
        "last_name": TestSurname,
        "email": TestEmail,
        "job": TestJob,
        "agree": TestAgree
    };
    data.push(jsonObject);
}

I tried to push the new element on the list but naturally the code reload the function populateTable() without considering this new element.

Ho can I resolve it?