I have a function which fetches data from the db(firestore) and creates a array of objects to feed to a datatable (myTable).

     $("#getdata").click(function()
            {

                $('#myTable').DataTable().destroy();


                 $('body').loadingModal('show');
                var ref,cat,dt,noc2;
                cat=$("#customertyp1 option:selected").val();
                dt=$("#debttyp1 option:selected").val();
                noc2=$("#noc option:selected").val();
               ref=db.collection("debt");
                if(cat!="All")
                   ref=ref.where("debtorcatagory", "==", cat);
                    if(dt!="All")
                        ref=ref.where("type1","==",dt);
                     if(noc2!="Multiple")  
                        ref=ref.where("noc","==",noc2);

           ref.onSnapshot(function(querySnapshot) {
                var temp = [];
                querySnapshot.forEach(function(doc) {
                    temp.push(doc.data());

                });
                console.log(temp);
             //datatables here


                 var table=$('#myTable').DataTable( {
                data:temp,
                "columns": [
                    { data: "name" },
                    {data:"contactno"},
                    { data: "balance" },
                    {data:"lastcommdate"},
                    {data:"lastcommdetails"},
                    {data:"setreminder"},
                 {
              "data": null,
              "defaultContent": "<button>Update</button>",

            }
                ],
                      dom: 'Bfrtip',

                      buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                      "destroy": true,
                  responsive: true,
            } );

               $('#myTable tbody').on('click', 'tr', function () {
                //var data = 

                    console.log(this.cells[1].innerHTML);
                   //console.log(data);
                   //lstbtnval=data.contactno;
               $('#myModal2').modal('toggle');

            } );

                $('body').loadingModal('hide');
            });


         });

If the get data button is clicked once without refreshing the page the outcome is perfect.But whenever I click the getdata button multiple times the view of the table is as desired but on click of the default update button here:
` $('#myTable tbody').on('click', 'tr', function () {
//var data =

                                                    console.log(this.cells[1].innerHTML);
                                                   //console.log(data);
                                                   //lstbtnval=data.contactno;
                                               $('#myModal2').modal('toggle');

                                            } );`

The log console.log(this.cells[1].innerHTML); is repeated the number of times the getdata button is clicked. I have already tried table.clear().redraw(); and table.empty() but neither works.