Data duplicates whenever its onclick link is clicked

So I have a table in html which displays all rentals from my database. The owner name and renter is retrieve from two different queries which is done inside the uery of retrieving data from rental table on database. The The problem is whenever I click the link that enables the function rentalhistory to run, data was added again resulting to duplicate the previous data.

  var rentalref = db.ref('rental');

        rentalref.once("value").then(function(snapshot) {
        var history = [];
        snapshot.forEach(function(childSnapshot) {
        var key = childSnapshot.key; // "ada"

        var childData = childSnapshot.val();
        console.log(childSnapshot.key);

        childSnapshot.forEach(function(data) {                       
          var pid = data.val().property_id;
          var rid = data.val().renter_id;
          var oid = data.val().owner_id;
          var date = data.val().date_created;

         var userref = db.ref('users/');                      

          userref.orderByChild("user_id").equalTo(rid).once("child_added", function(dataa) {  
          console.log(dataa.val().username);
          var rname = dataa.val().username;

              var userref = db.ref('users/');
              userref.orderByChild("user_id").equalTo(oid).once("child_added", function(dataa2) { 
              var oname = dataa2.val().username;
              $("#rentaltable").append("<tr><td>" +pid+"</td><td>" +oname+"</td><td>" +rname+"</td><td>" +date+"</td></tr>"); 

              });     
            }); 
           });
          });
         });