Как связать объекты согласно расположению в Dom-дереве?

Question

[Evtera]

Как сделать, чтобы при нажатии на ".column__video_slides" менялось свойство у ".column__frame" в соответствующем порядке? То есть, я нажимаю на 1 слайд, свойства меняются у 1 фрейма согласно расположению в DOM-дереве. Нажимаю на 2ой слайд свойства меняются у 2 фрейма.

<div class="column about__column-video">
              <div class="column__video column__video_big">
                <div class="column__frame">
                  <iframe
                    src="https://www.youtube.com/embed/X_9VoqR5ojM"
                    frameborder="0"
                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                  ></iframe>
                </div>
                <div class="column__frame">
                  <iframe
                    src="https://www.youtube.com/embed/IW2Myg69oY4"
                    frameborder="0"
                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                  ></iframe>
                </div>
                <div class="column__frame">
                  <iframe
                    src="https://www.youtube.com/embed/wHqZ3VwMNmo"
                    frameborder="0"
                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                  ></iframe>
                </div>
              </div>
              <div class="column__video column__video_slides">
                <img src="img/2.about/1.jpg" alt="" />
                <img src="img/2.about/2.png" alt="" />
                <img src="img/2.about/3.png" alt="" />
              </div>
            </div>

column__video {
  display: flex;
  max-width: 546px;
  width: 100%;
  height: 100%;
}

.column__video_slides {
  display: flex;
  justify-content: space-between;
}
.column__video_slides img {
  max-width: 17rem;
  width: 100%;
  max-height: 10rem;
  height: 100%;
  cursor: pointer;
}
.column__video_slides img:hover {
  border: 1px solid red;
}
.column__frame {
  position: relative;
  width: 100%;
  padding-bottom: 73.6%;
  height: 0;
}
.column__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.column__frame_active iframe {
  width: 100%;
  height: 100%;
}

.about__column-video {
  overflow: hidden;
  max-width: 546px;
  width: 100%;
}

$(".column__video_slides")
    .children()
    .on("click", () => {
      $(".column__frame").toggleClass("column__frame_active");
    });