Асинхроность между двумя дивами на js?

var wrapper1Item = document.getElementsByClassName('wrapper1-item'); 
var wrapper2Item = document.getElementsByClassName('wrapper2-item'); 
for (let i = 0; i < wrapper1Item.length; i++) { 
  wrapper1Item[i].addEventListener('click', function() { 
    for (let i = 0; i < wrapper1Item.length; i++) { 
      wrapper1Item[i].classList.remove('active'); 
      wrapper2Item[i].classList.remove('active'); 
    } 
    wrapper1Item[i].classList.add('active'); 
    wrapper2Item[i].classList.add('active'); 
  }) 
}

.wrapper1-item.active { 
  background: red; 
} 
 
.wrapper2-item.active { 
  background: red; 
}

<div class="wrapper1"> 
  <div class="wrapper1-item active">wrapper1-item</div> 
  <div class="wrapper1-item">wrapper1-item</div> 
  <div class="wrapper1-item">wrapper1-item</div> 
  <div class="wrapper1-item">wrapper1-item</div> 
  <div class="wrapper1-item">wrapper1-item</div> 
</div> 
 
<div class="wrapper2"> 
  <div class="wrapper2-item active">wrapper2-item</div> 
  <div class="wrapper2-item">wrapper2-item</div> 
  <div class="wrapper2-item">wrapper2-item</div> 
  <div class="wrapper2-item">wrapper2-item</div> 
  <div class="wrapper2-item">wrapper2-item</div> 
</div>