jQuery, select item X of each group

When you select item 2 of group X, item 2 is selected in every group that contains that same element.

by iBertel

HTML

<div class="parent">
  <div class="asd">asd1
    <br>
  </div>
  <div class="asd">asd2
    <br>
  </div>
  <div class="asd">asd3
    <br>
  </div>
</div>

<div class="parent">
  <div class="asd">asd4
    <br>
  </div>
  <div class="asd">asd5
    <br>
  </div>
  <div class="asd">asd6
    <br>
  </div>
</div>

<div class="parent">
  <div class="asd">asd7
    <br>
  </div>
  <div class="asd">asd8
    <br>
  </div>
  <div class="asd">asd9
    <br>
  </div>
</div>

<div class="parent">
  <div class="asd">asd10
    <br>
  </div>
  <div class="asd">asd11
    <br>
  </div>
  <div class="asd">asd12
    <br>
  </div>
</div>

CSS

.parent {
  margin-bottom: 10px;
}

.active {
  color: blue;
  font-weight: bold;
}

JavaScript

$('.parent').each(function(i, el) {
  $(el).find('.asd').click(function(e) {
    var index = $(e.target).index();
    $('.asd').removeClass('active');
    console.log("item: " + index, "group: " + $(this).index());

    $('.parent').each(function(i, el) {
      $(el).find('.asd').eq(index).addClass('active');
    });
  });
});