Bootstrap模态显示相同的内容

我一直在寻找这个问题的答案两天，而我尝试的每个代码都不适合我。我要做的就是在单击特定图片时将图片动态添加到模态中，但是每次打开模态时都会显示同一组图片。我相信这个想法是在模态关闭后清除模态主体，但是我不知道该怎么做，而且我看到的每个示例都没有用。这是我的代码。

var maxAppend = 0;
$(window).on("load",function() { // makes sure the whole site is loaded
$("#status").fadeOut(); // will first fade out the loading animation
$("#preloader").delay(500).fadeOut("slow"); // will fade out the white DIV that covers the website.
//$(".details-box").delay(1000).fadeIn(500);
});
var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var img2 = document.getElementById("myImg2");
var modalImg = ['./pictures/loginScreen.png','./pictures/pDisplay.png','./pictures/packageDetails.png','./pictures/financeOpt.png','./pictures/result.png']
var modalImg2 = ['./pictures/mOasis1.png','./pictures/mOasis2.png','./pictures/mOasis3.png','./pictures/mOasis4.png','./pictures/mOasis5.png']
var imgModal = document.getElementsByClassname("img01");
img.Onclick= function(){
modal.style.display = "block";
for(i = 0; i <5; i++){
if(maxAppend <5){
$(imgModal).append('');
maxAppend++;
}
}
}
img2.Onclick= function(){
modal.style.display = "block";
for(i = 0; i <5; i++){
if(maxAppend <5){
$(imgModal).append('');
maxAppend++;
}
}
}
// Get the element that closes the modal
var span = document.getElementsByClassname("close")[0];
// When the user clicks on (x),close the modal
span.Onclick= function() {
modal.style.display = "none";
}