JavaScriptでボタンを再度クリックするとデータが複製されます

Question

すべてのデータを表示することができますが、もう一度[チーム]をクリックするとデータが2回表示されます。もう一度クリックすると、データが表示される回数が増えます。一度データを表示するにはどうしたらいいですか？私は6人のチームメンバーだけを意味し、6人のチームメンバーは繰り返されません。

function myFunction() { 
    var popup = document.getElementById("myPopup"); 
    popup.classList.toggle("show"); 

    var data1 = "TEAMSEARCH"; 
    $.ajax({ 
     url: 'TeamAssignment', 
     type: 'POST', 
     data: { 
     data1: data1 
     }, 
     success: function(result) { 
     var memberList = $.parseJSON(result); 
     for (var i = 0; i < memberList.length; i++) { 
      console.log(memberList[i].fullName); 
      document.getElementById("demo").innerHTML += '<li style="list-style:none;">' + memberList[i].fullName + '</li>'; 
     } 
     } 
    }); 
    } 

<div class="col-lg-3 mb-0" style="display: flex;align-items: center;"> 
    <div class="popup" onclick="myFunction()"> 
     <h6>My team</h6> 
     <span class="popuptext" id="myPopup">My team members:<br><h7 id="demo"></h7><br></span> 
    </div> 
    </div> 
</div> 
<ol class="breadcrumb"></ol> 

Answer 1

forループを開始する前に、デモ要素をクリアする必要があります。個人的に

success: function(result) { 
    var memberList = $.parseJSON(result); 
    document.getElementById("demo").innerHTML = ''; 
    for (var i = 0; i < memberList.length; i++) { 
      console.log(memberList[i].fullName); 
      document.getElementById("demo").innerHTML += '<li style="list-style:none;">' + memberList[i].fullName + '</li>'; 
     } 
    } 

jQueryを使って作業する場合、私は、代わりに、コードを以下の好む：

$.ajax({ 
    url: 'TeamAssignment', 
    type: 'POST', 
    data: { 
     data1: data1 
    }, 
    dataType: "json", 
    success: function(memberList) { 
     $("#demo").html(''); 
     for (var i = 0; i < memberList.length; i++) { 
      console.log(memberList[i].fullName); 
      $("#demo").append('<li style="list-style:none;">' + memberList[i].fullName + '</li>'); 
     } 
    } 
});