When you click on the n th .team-j you need to add .show to team-card-j to the same n -th element.

 function team() { var a = document.getElementsByClassName("team-j"); var b = document.getElementsByClassName("team-card-j"); for (var i = 0; i < a.length; i++) { a[i].addEventListener('click', function() { for (var j = 0; j < b.length; j++) { b[j].classList.remove("show"); } }); } } team(); 
 <div> <div class="team-j"></div> <div class="team-j"></div> <div class="team-j"></div> <div class="team-j"></div> </div> <div> <div class="team-card-j show"></div> <div class="team-card-j"></div> <div class="team-card-j"></div> <div class="team-card-j"></div> </div>

    1 answer 1

     function team() { var a = document.getElementsByClassName("team-j"); var b = document.getElementsByClassName("team-card-j"); for (var i = 0; i < a.length; i++) { a[i].addEventListener('click', function() { for (var j = 0; j < b.length; j++) { b[j].classList.remove("show"); if(this == a[j]) b[j].classList.add("show"); } }); } } team(); 
     .team-j { width: 20px; height: 20px; border: 1px solid gray; } .team-card-j { width: 20px; height: 20px; border: 1px solid green; } .team-card-j.show{ border: 1px solid red; } 
     <div> <div class="team-j"></div> <div class="team-j"></div> <div class="team-j"></div> <div class="team-j"></div> </div> <div> <div class="team-card-j show"></div> <div class="team-card-j"></div> <div class="team-card-j"></div> <div class="team-card-j"></div> </div>