Как мне показать несколько каруселей на одной странице, используя этот код

Question

Я пытаюсь показать три карусели на моей странице, может кто-нибудь показать мне, как это сделать, пожалуйста?

* {
   box-sizing: border-box;
  }

.mySlides1, .mySlides2, .mySlides3 {
                                    display: none
                                   }

img {
     vertical-align: middle;
    }

.slideshow-container {
                      max-width: 1000px;
                      position: relative;
                      margin: auto;
                     }

.prev, .next {
              cursor: pointer;
              position: absolute;
              top: 50%;
              width: auto;
              padding: 16px;
              margin-top: -22px;
              color: white;
              font-weight: bold;
              font-size: 18px;
              transition: 0.6s ease;
              border-radius: 0 3px 3px 0;
              user-select: none;
             }

.next {
       right: 0;
       border-radius: 3px 0 0 3px;
      }

.prev:hover, .next:hover {
                          background-color: #f1f1f1;
                          color: black;
                         }


<p6>House 1</p6>
<div class="slideshow-container">
  <div class="mySlides1">
    <img src="../../Downloads/Housee.jpg" style="width:100%" alt="House">
  </div>

  <div class="mySlides1">
    <img src="../../Downloads/Houseee.jpg" style="width:100%" alt="House">
  </div>

  <div class="mySlides1">
    <img src="../../Downloads/Houseeee.jpg" style="width:100%" alt="House">
  </div>

  <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
</div>
<br>
<br>
<p6>House 2</p6>
<div class="slideshow-container">
  <div class="mySlides2">
    <img src="../../Downloads/Homeee.jpg" style="width:100%" alt="House">
  </div>

  <div class="mySlides2">
    <img src="../../Downloads/Homee.jpg" style="width:100%" alt="House">
  </div>

  <div class="mySlides2">
    <img src="../../Downloads/Home.jpg" style="width:100%" alt="House">
  </div>

  <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
</div>
<br>
<br>
<p6>House 3</p6>
<div class="slideshow-container">
  <div class="mySlides">
    <img src="../../Downloads/Abode.jpg" style="width:100%" alt="House">
  </div>

  <div class="mySlides">
    <img src="../../Downloads/Abodee.jpg" style="width:100%" alt="House">
  </div>

  <div class="mySlides">
    <img src="../../Downloads/Abodeee.jpg" style="width:100%" alt="House">
  </div>

  <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
</div>
<script>
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}

Если бы вы могли показать мне примеры того, как изменится javascript для размещения третьей и четвертой каруселей, я был бы чрезвычайно признателен!