[JS] 이미지 클릭시 해당 이미지로 변경

HTML

 <div id="prod-pic">
      <img
        src="/img/sec2_1.png"
        alt=""
        width="200"
        height="200"
        class="main_pic"
      />
      <div id="small-pic">
        <img class="small" src="/img/sec2_2.png" alt="" />
        <img class="small" src="/img/sec2_3.png" alt="" />
        <img class="small" src="/img/sec2_4.png" alt="" />
      </div>
    </div>

CSS

#prod-pic {
  margin: 20px 20px auto 10px;
  padding: 0;
}
#small-pic {
  margin-top: 5px;
}

.small {
  width: 63px;
  height: 63px;
}
.small-pic img:hover {
  cursor: pointer;
}

JS

let bigPic = document.querySelector(".main_pic");
let smallPics = document.querySelectorAll(".small");

for (let i = 0; i < smallPics.length; i++) {
  smallPics[i].addEventListener("click", changePic);
}

function changePic() {
  let newPic = this.src;
  bigPic.setAttribute("src", newPic);
}

---

div.prod-pic가 여러개일땐..
let mainpic = document.querySelectorAll(".main_pic");
let subpic = document.querySelectorAll(".small");

for (let i = 0; i < subpic.length; i++) {
subpic[i].addEventListener("click", changePic);
}

function changePic() {
for (let i = 0; i < mainpic.length; i++) {
let newPic = this.src;
mainpic[i].setAttribute("src", newPic);
console.log(i);
}
}
를 하면..

위아래 mainpic에 같은 이미지가 떠버린다...

해결은...
TO BO CONTINUE............ㅠ