how to remove duplicating values in rows

enter image description here

Is possible to remove duplicate values on html while updating in my firebase?

Js codes:

const tempRef = firebase.database().ref('Group1');
  tempRef.on('value',gotData)
        
function gotData(data){
  var nn= 0;
  var G=data.val();
  var keys=Object.keys(G);
 
  for (var i = 0; i< keys.length; i++){
    var k =keys[i];
    var First_name = G[k].Info.First_name;
    var value = G[k].value;
    var tbody= document.getElementById('tbody1');
    var trow= document.createElement('tr');
    trow.className = 'rowing';
    var td1= document.createElement('td');
    var td2= document.createElement('td');
    var td3= document.createElement('td');
    td1.innerHTML= ++nn;
    td2.innerHTML= First_name;
    td3.innerHTML= value;
    trow.appendChild(td1);trow.appendChild(td2);trow.appendChild(td3);
    tbody.appendChild(trow);
  }
}

Answer

You can try this:

const tempRef = firebase.database().ref('Group1');
  tempRef.on('value',gotData)
        
function gotData(data){
  var nn= 0;
  var G=data.val();
  var keys=Object.keys(G);
  let uniqueNames = {}     
  for (var i = 0; i< keys.length; i++){
    var k =keys[i];
    var First_name = G[k].Info.First_name;
    if(!uniqueNames[First_name]){
      uniqueNames = {...uniqueNames, [First_name]:true}
      var value = G[k].value;
      var tbody= document.getElementById('tbody1');
      var trow= document.createElement('tr');
      trow.className = 'rowing';
      var td1= document.createElement('td');
      var td2= document.createElement('td');
      var td3= document.createElement('td');
      td1.innerHTML= ++nn;
      td2.innerHTML= First_name;
      td3.innerHTML= value;
      trow.appendChild(td1);trow.appendChild(td2);trow.appendChild(td3);
      tbody.appendChild(trow);
    }
  }
}