एचटीएमएल सीएसएस टॉगल div अस्पष्टता

let divFlags = document.getElementsByClassName("flags");

for (let j = 0; j < divFlags.length; j ++) {
  let flags = divFlags[j].getElementsByTagName("div");
  for (let i = 0; i < flags.length; i++) {
    flags[i].addEventListener("click", function() {
      if (flags[i].classList.contains("active")) {
        flags[i].classList.remove("active");
      } else {
        flags[i].classList.add("active");
      }
    });
  }
}

.flags {
    display: inline-block;
}

.flags .flag {
    display: inline-block;
    padding: 10px;
    opacity: 0.3;
}

.flags .flag:hover {
    cursor: pointer;
}

.flags .flag.active {
    opacity: 1;
}

<div class="flags">
    <div class="flag" >
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
</div>

const divs = document.querySelectorAll('.flags div')
for (const div of divs) {
  div.addEventListener('click', () => {
    div.classList.toggle('active')
  })
}

.flags div {
  cursor: pointer;
  border: 1px solid red;
  padding: 1rem;
  opacity: 0.3;
  width: 10rem;
}

.flags div.active {
  opacity: 1;
}

<div class="flags">
  <div>First Div</div>
  <div>Second Div</div>
  <div>Thrid Div</div>
</div>