动态呈现表的空Div标记问题

I am creating dynamic table and appending it to Div tag on my .php page. On my .php page, I have dynamic buttons and if I click on any of the dynamic buttons, the dynamic table is rendered which has multiple headers and rows (for which I have written for loops with ajax requests). The issue is that, if i click on any of the dynamic buttons again, the current dynamic table data is appended to the previous dynamic table, instead I want to remove previously appended table data and render the current dynamic table data. I tried to empty the div tag but nothing seems working here. Hope I get some help, thanks in advance. Below are my .php and .js files:

.php file- I didnt post the function definition for get_Btns() as it is the basic php function to fetch data from the database:

<?php
    function get_Btns() {
      include "config.php"; 

      $btns = $stmtDivision->fetchAll(PDO::FETCH_ASSOC);

    foreach($btns as $btn){
      echo "<input type='button' id='".$btn['divisionid']."' value='".$btn['division_name']."'
            onclick=getData('".$btn['divisionid']."')  >" ; echo "<br/>"; ?>           
    <script src="./user.js"></script> 
    <?php }
  } 
?> 
<?php include "templates/header.php"; ?> 
    <div id="buttons_panel" style="text-align:center">
      <?php echo get_Btns();?> </div>
    <div id="div" class="divClass" ></div> <br/>

.js file:

function getData(value) {
document.getElementById("div");
var tableHtml = $('<table></table>');
var selectedManager = value;
var isEmpty = $('#div').empty();
// document.getElementById("div").innerHTML === "";
// document.getElementById("div").HTML === "";
// var isEmpty = $("#div").html() === ""; 
//$(".divclass").empty(); 
var teams = null;
$.ajax({
    url: 'data.php',
    method: 'post',
    data: 'selectedManager=' + selectedManager,
    async: false,
    success: function(data) {
        teams = JSON.parse(data);
    }
});
for (var k = 0; k < teams.length; k++) {
    const selectedteam = teams[k];
    var selectedteamid = team[k].teamid;
    var htmlth = "";
    var html = "";
    htmlth = "<tr>" + "<th id='thgrp' colspan='4' background-color: #013466;>" + teams[k].teamname + "</th>" + 
        "<th colspan='2' background-color: #62b8b6;>" + "<a href='Update.php?groupid=" + selectedteam.teamid + "' >" +
        'Update Team member' + "</a>" + "</th>" + "</tr>" +
        "<tr>" + "<th>" + "<img src='images/member.png'>" + "<b>" + "<div>" + 'Member' + "</div" + "</th>" +
        "<th>" + "<img src='images/phone.png'>" + "<b>" + "<div >" + 'Phone' + "</div" + "</th>" +
        "<th>" + "<img src='images/email.png'>" + "<b>" + "<div >" + 'Email' + "</div" + "</th>" + "</tr>";
    tableHtml.append(htmlth);
    var members = null;
    $.ajax({
        url: 'data.php',
        method: 'post',
        data: 'selectedteamid=' + selectedteamid,
        async: false,
        success: function(data) {
            members = JSON.parse(data);
            console.log(members);
        }
    });
    for (var i = 0; i < members.length; i++) {
        html += "<tr>" + "<td>" + members[i].name + "</td>" +
            "<td>" + members[i].phone + "</td>" + "<td>" + members[i].email + "</td>";
    }
    tableHtml.append(html)
}
$("#div").append(tableHtml);
value = "";

}

Issue solved, I tried to empty the dynamic table that I have created instead of emptying the div tag on my html page. I did this earlier but I didn't do it properly. Thank you so much everyone for your time This is the code:

tableHtml.attr('id', 'tableHtmlId');
$('#tableHtmlId').empty();