How can I show only one div among multiple divs with same classname in Javascript? [on hold]

I am now doing a dynamic bootstrap modal. I will use only one modal body with dynamic data. Currently, the modal is working well and data are also dynamic. The problem is that the old data div is not disappeared, and all the data are stacking inside the modal body. So, how can I remove the old divs with "same classname" and show only of current div in the "modal-body-content" div?

//Function to launch the modal

function lauchModal(modalID, title) {

var group = document.getElementById(modalID);
var existingBody = group.getElementsByClassName("app-body");
var footer = group.getElementsByClassName("app-footer");

//Passing in Values
$(".modal-title").text(title);
$(".modal-body-content").removeData();
$(".modal-body-content").append(existingBody);
$(".modal-footer").append(footer);

$("#mainModal").modal('show');

};

//buttons to show the modal

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

          lauchModal("NewFolderModal", "New Folder");
      });