Как связать элементы карточек — что бы работало по отдельности(html, js)?

Question

[AlexZD7887]

Есть три карточки - каждая карточка имеет color-option - переключатель цвета и main-images - набор картинок при переключении. Ниже код отрабатывает только переключение для первой карточки. Как исправить код что бы реализовать переключение цвета с паралельной сменой картинки для всех трех отдельно карточек?

<div class="cards">
        <div class="product-card">
            <div class="logo-cart">
                <img src="img/Adidas_Logo.svg" alt="adidas">
                <i class='bx bx-shopping-bag'></i>
            </div>
            <div class="main-images">
                <img id="black" class="black active" src="img/black.png" alt="black">
                <img id="pink" class="pink" src="img/pink.png" alt="pink">
                <img id="blue" class="blue" src="img/blue.png" alt="blue">
            </div>
            <div class="shoe-details">
                <span class="shoe_name">ADIDDAS ZX ONCE</span>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                <div class="stars">
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bx-star' ></i>
                </div>
            </div>
            <div class="color-price">
                <div class="color-option">
                    <span class="color">Colour:</span>
                    <div class="circles">
                        <span class="circle black active" id="black"></span>
                        <span class="circle pink" id="pink"></span>
                        <span class="circle blue" id="blue"></span>
                    </div>
                </div>
                <div class="price">
                    <span class="price_num">$01.00</span>
                    <span class="price_letter">One dollar only</span>
                </div>
            </div>
            <div class="button">
                <div class="button-layer"></div>
                <button>Add To Cart</button>
            </div>
        </div>
        <div class="product-card">
            <div class="logo-cart">
                <img src="img/Adidas_Logo.svg" alt="adidas">
                <i class='bx bx-shopping-bag'></i>
            </div>
            <div class="main-images">
                <img id="black" class="black active" src="img/black.png" alt="black">
                <img id="pink" class="pink" src="img/pink.png" alt="pink">
                <img id="blue" class="blue" src="img/blue.png" alt="blue">
            </div>
            <div class="shoe-details">
                <span class="shoe_name">ADIDDAS ZX ONCE</span>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                <div class="stars">
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bx-star' ></i>
                </div>
            </div>
            <div class="color-price">
                <div class="color-option">
                    <span class="color">Colour:</span>
                    <div class="circles">
                        <span class="circle black active" id="black"></span>
                        <span class="circle pink" id="pink"></span>
                        <span class="circle blue" id="blue"></span>
                    </div>
                </div>
                <div class="price">
                    <span class="price_num">$01.00</span>
                    <span class="price_letter">One dollar only</span>
                </div>
            </div>
            <div class="button">
                <div class="button-layer"></div>
                <button>Add To Cart</button>
            </div>
        </div>
        <div class="product-card">
            <div class="logo-cart">
                <img src="img/Adidas_Logo.svg" alt="adidas">
                <i class='bx bx-shopping-bag'></i>
            </div>
            <div class="main-images">
                <img id="black" class="black active" src="img/black.png" alt="black">
                <img id="pink" class="pink" src="img/pink.png" alt="pink">
                <img id="blue" class="blue" src="img/blue.png" alt="blue">
            </div>
            <div class="shoe-details">
                <span class="shoe_name">ADIDDAS ZX ONCE</span>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                <div class="stars">
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bx-star' ></i>
                </div>
            </div>
            <div class="color-price">
                <div class="color-option">
                    <span class="color">Colour:</span>
                    <div class="circles">
                        <span class="circle black active" id="black"></span>
                        <span class="circle pink" id="pink"></span>
                        <span class="circle blue" id="blue"></span>
                    </div>
                </div>
                <div class="price">
                    <span class="price_num">$01.00</span>
                    <span class="price_letter">One dollar only</span>
                </div>
            </div>
            <div class="button">
                <div class="button-layer"></div>
                <button>Add To Cart</button>
            </div>
        </div>
    </div>

let circle = document.querySelectorAll(".color-option");
        let images = document.querySelectorAll(".main-images");

        circle.forEach(circle => circle.addEventListener("click", (e)=>{
                let target = e.target;
                if(target.classList.contains("circle")){
                    circle.querySelector(".active").classList.remove("active");
                    target.classList.add("active");
                    document.querySelector(".main-images .active").classList.remove("active");
                    document.querySelector(`.main-images .${target.id}`).classList.add("active");  
               }
            }));

Answer 1

[Команданте Фидель]

В пределах документа не может быть два (и более) элементов с одинаковыми ID.
Используйте data-атрибуты или классы.