Async between two divs in js?

Question

assembler

hello there is a structure

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

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

How to make it so that when you click on an element from wrapper1, an element that is in exactly the same position at the index from wrapper 2 will receive the active class And the rest will be deleted, because only 2 can have the active class
Only pure JS is interested

Answer 1

asmworld.ru/uchebnyj-kurs/022-vyvod-chisel-na-konsol

Answer 2

https://jsfiddle.net/v6pw77vh/

Answer 3

<div class="wrapper1">
  <div class="wrapper1-item active">1</div>
  <div class="wrapper1-item">2</div>
  <div class="wrapper1-item">3</div>
  <div class="wrapper1-item">4</div>
  <div class="wrapper1-item">5</div>
</div>

<div class="wrapper2">
  <div class="wrapper1-item active">1</div>
  <div class="wrapper1-item">2</div>
  <div class="wrapper1-item">3</div>
  <div class="wrapper1-item">4</div>
  <div class="wrapper1-item">5</div>
</div>

<script>
  'use strict';
var w1 = document.querySelector('.wrapper1'),
  w2 = document.querySelector('.wrapper2');
[].forEach.call(w1.children, function(i,ind) {
  i.ind = ind;
});
[].forEach.call(w2.children, function(i,ind) {
  i.ind = ind;
});
w1.addEventListener('click', function (e) {
  var t = e.target;
  if(t.ind === undefined) return;
  [].forEach.call(w2.children, function(i) {
    i.classList.remove('active');
  });
  w2.children[t.ind].classList.add('active');
});
</script>