如何在同一网页上使用具有不同图像的多个引导程序jumbotrons？

<div id="jumbotrons-container">
  <div id="jumbotrons-1" class="jumbotrons">
    <h1>Jumbotron 1</h1>
    <img src="image1.jpg" alt="Image 1">
    <p>Content for jumbotron 1...</p>
  </div>
  <div id="jumbotrons-2" class="jumbotrons">
    <h1>Jumbotron 2</h1>
    <img src="image2.jpg" alt="Image 2">
    <p>Content for jumbotron 2...</p>
  </div>
</div>

.jumbotrons {
  background-color: #f8f9fa;
  padding: 20px;
  margin-bottom: 20px;
}

#jumbotrons-1 {
  background-image: url("image1.jpg");
  color: #ffffff;
  font-size: 24px;
}

#jumbotrons-2 {
  background-image: url("image2.jpg");
  color: #000000;
  font-size: 18px;
}

// 修改jumbotrons内容或样式
document.getElementById("jumbotrons-1").innerHTML = "<h1>New Title</h1><img src='new_image.jpg' alt='New Image'><p>New content...</p>";

// 获取jumbotrons引用并修改样式
var jumbotrons = document.getElementsByClassName("jumbotrons");
for (var i = 0; i < jumbotrons.length; i++) {
  jumbotrons[i].style.border = "1px solid #000000";
}