在Json中点击时如何防止旧数据打印

I have simple trouble in json

This is my Json code

{ "id" : "1", "name" : "test1" },
  { "id" : "2", "name" : "test2" },
  { "id" : "3", "name" : "test3" },
  { "id" : "4", "name" : "test4" },
  { "id" : "5", "name" : "test5" }

And this it the ajax code I am getting the data

function load_res()
{
$.ajax({
    url: 'data.js',
    type: 'POST',
    dataType: 'json',
    success: function(data) {

        var div_data='';
        $.each(data, function(index, element) {
            div_data +="<div ><a href='"+data.name+"'>"+data[index].name+"</a></div>";
        });

        $('#9lessonsLinks').append(div_data);

    }
});
}

HTML part

<a onclick="load_res()">Button</a>

<div id="9lessonsLinks"></div>

Above code it working well and data retrieve and display. But my problem is, when I add a new row to JSON file and I click on load_res() function, it will show old printed data with new data again, multiple printing with multiple clicking. I only want to get the newly added data as last line. please help me to resolve this. appreciate your great ideas.

Thanks!

Easy fix: change .append to .html

$('#9lessonsLinks').html(div_data);

Empty the list before adding the items to it...

$('#9lessonsLinks').empty().append(div_data);

With javascript like this:

document.getElementById("9lessonsLinks").innerHTML = div_data;