AJAX code doesnt reload
<p>Been trying to follow a tutorial: 
<a href="https://www.udemy.com/json-ajax-data-transfer-to-mysql-database-using-php/" rel="nofollow noreferrer">https://www.udemy.com/json-ajax-data-transfer-to-mysql-database-using-php/</a></p>

<p>There is a video in section 4: lecture 20</p>

<p><strong>script.js</strong></p>

<pre><code>    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 &amp;&amp; ajaxhttp.status == 200){
        var jcontent = JSON.parse(ajaxhttp.responseText);

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

<p>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.</p>

<p><a href="https://i.stack.imgur.com/LUDFD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LUDFD.png" alt="enter image description here"></a></p>

<p>Can someone explain why this is happening?</p>