How to add different image slideshow in html on the same page?

From API I’m getting array of images and when requesting the API second time I’m getting another array of different images. When press the button I want to add an images array to the bootstrap gallery and when press again I want to add second array into another gallery. I don’t understand how reuse the same bootstrap html template and create different image galleries in the same html page. API object:

 {
  "title": "rodeo",
  "author": "consectetur",
  "images": [
"http://example/photo.jpg",
"http://example/photostwo.jpg",
"http://example/photosone.jpg"
  ],
  "year": "1998"
} 

<div>
  <div id="container"></div>
  <button id="dataBtn"></button>
</div>

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
    <img class="d-block w-100" src="...">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

function test(){
const carouselItem = document.querySelector('.carousel-item');

function create(element) {
    return document.createElement(element);
}

function append(parent, el) {
    return parent.appendChild(el);
}


for (image of data.images) {
    let img = create('img');
    img.classList.add(‘d - block’, ‘w - 100’);
    img.src = image;
    append(carouselItem, img);

} 
}
test();
document.getElementById("dataBtn").addEventListener("click", test);