AJAX代码不会重新加载

Question

Been trying to follow a tutorial: https://www.udemy.com/json-ajax-data-transfer-to-mysql-database-using-php/

There is a video in section 4: lecture 20

script.js

    var output = document.getElementById('output');
output.innerHTML = "";  

function submitData(fdata){
    var xhttp = new XMLHttpRequest();
    xhttp.onload = function(){ console.log(xhttp.responseText);
        jData();}
    xhttp.open(fdata.method,fdata.action,true);
    xhttp.send(new FormData(fdata));

    //console.log(fdata.method);
    return false;   
}


function jData(){
var ajaxhttp = new XMLHttpRequest();
var url ="json.php";
ajaxhttp.open("GET", url, true);
ajaxhttp.setRequestHeader("content-type","application/json");

ajaxhttp.onreadystatechange = function(){
    if(ajaxhttp.readyState == 4 && ajaxhttp.status == 200){
        var jcontent = JSON.parse(ajaxhttp.responseText);

        for (var myObj in jcontent){
            output.innerHTML += '<div>' + jcontent[myObj].firstName + ' ' + jcontent[myObj].lastName + 
            ' ' + jcontent[myObj].age + '</div>';
        }
        console.log(jcontent);
    }
}
ajaxhttp.send();
}

I'm not so sure how I am suppose to put the other codes here since it requires a sql command but if ever someone could look at this code. The code is suppose to display the data and every time I insert a new data. It's suppose to display the new data at the bottom however the code does it displays all the data over and over again.

Can someone explain why this is happening?