How to stop displaying repeated JSON data in HTML?

Question

When I load JSON data in HTML using append() it will display data but when I click again it will repeat the data.

How can I display the data only once? I want to stop repeating data. Thank you in advance.

fetch('extracontent.json').then(function(response) {
  return response.json();
}).then(function(data) {
  appendData(data);
}).catch(function(err) {
  console.log('error: ' + err);
});

function appendData(data) {
  var mainContainer = document.getElementById("myData");
  document.getElementById("panel").style.display = "block";

  for (var i = 0; i < data.abc.length; i++) {
    var d = document.createElement("d");
    d.innerHTML = data.abc[i].sectionname + data.abc[i].unitname + data.abc[i].link;
    mainContainer.appendChild(d);
  }
}