Выберите изображение из любого класса «собрать»

#image #collect

Вопрос:

Я хочу знать, что делать, чтобы я мог выбрать любое изображение из «collect». В нынешней ситуации — Работает только первый класс «coolect».

     thank you :)
    
<body>
  <div class="collect">
    <img src="https://source.unsplash.com/ufFIweqSPd4/800x800" id="mainImage">
    <div id="colectImages">
      <img class="selectImg" src="https://source.unsplash.com/ufFIweqSPd4/800x800">
      <img class="selectImg" src="https://source.unsplash.com/O0uCm1WLnA0/800x800">
    </div>
  </div>


  <div class="collect">
    <img src="https://source.unsplash.com/ufFIweqSPd4/800x800" id="mainImage">
    <div id="colectImages">
      <img class="selectImg" src="https://source.unsplash.com/ufFIweqSPd4/800x800">
      <img class="selectImg" src="https://source.unsplash.com/O0uCm1WLnA0/800x800">
    </div>
  </div>

  <script>

    let i = 0;
    var colectImages = document.getElementById("colectImages");
    var imgsStyle = colectImages.getElementsByClassName("selectImg");
    var mainImage = document.getElementById("mainImage");

    for (let i = 0; i < imgsStyle.length; i  ) {
      let selectImg = imgsStyle[i];

      selectImg.addEventListener("click", function () {
        mainImage.src = this.src
      });
    }