How to remove a class of all sibling elements when an element is clicked inside a jquery each loop

Question

I am looping over a group of elements with the same class. Now when an element is clicked I need it to get a class that makes it active and adds some css to it. This works but it stays forever, so if I click 4 elements I have 4 active elements.

I'm trying to remove the class from all sibling elements when 1 is clicked but below code does not work for some reason:

    $('.klantenblokje').each(function(i, obj) {
        $(this).on("click", function(e){
             e.preventDefault();
             var id = $(this).attr('id');
             $(this).addClass('activeblok');
             $(this).siblings().removeClass('activeblok');
     });
    });

I've also tried:

    $('.klantenblokje').each(function(i, obj) {
        $(this).on("click", function(e){
             e.preventDefault();
             var id = $(this).attr('id');
             $(this).addClass('activeblok').siblings().removeClass('activeblok');
     });
    });

Why doesn't it work? The class is added when I click, but for the siblings nothing is removed.

My HTML if that helps:

    <div class="col-md-2 col-6">
      <a href="#bezorgen" id="bezorgen" class="klantenblokje">
        <i class="icon-transport"></i>
        <span>Bezorgen</span>
      </a>
    </div>
    <div class="col-md-2 col-6">
      <a href="#bestellen" id="bestellen" class="klantenblokje">
        <i class="icon-cart"></i>
        <span>Bestellen</span>
      </a>
    </div>
    <div class="col-md-2 col-6">
      <a href="#betalen" id="betalen" class="klantenblokje">
        <i class="icon-euro"></i>
        <span>Betalen</span>
      </a>
    </div>
    <div class="col-md-2 col-6">
      <a href="#uploaden" id="uploaden" class="klantenblokje">
        <i class="icon-upload"></i>
        <span>Bestanden uploaden</span>
      </a>
    </div>
    <div class="col-md-2 col-6">
      <a href="#garantie-reparatie" id="garantie-reparatie" class="klantenblokje">
        <i class="icon-box"></i>
        <span>Garantie en reparatie</span>
      </a>
    </div>
    <div class="col-md-2 col-6">
      <a href="#account" id="account" class="klantenblokje">
        <i class="icon-user"></i>
        <span>Account</span>
      </a>
    </div>

Answer 1

• Since your <a> elements are not siblings, cache them first
• (No need to use .each() jQuery operates over collections already)
• Use your cached Elements instead of .siblings()
• Make use of .not(this) to filter-out the current one

const $blokje = $('.klantenblokje'); // Cache your elements

$blokje.on("click", function(e) {
    e.preventDefault();
    // var id = $(this).attr('id');
    $blokje.not(this).removeClass('activeblok');
    $(this).addClass('activeblok');
});

.activeblok { background: fuchsia; }

<div class="col-md-2 col-6">
  <a href="#bezorgen" id="bezorgen" class="klantenblokje">
    <i class="icon-transport"></i>
    <span>Bezorgen</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#bestellen" id="bestellen" class="klantenblokje">
    <i class="icon-cart"></i>
    <span>Bestellen</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#betalen" id="betalen" class="klantenblokje">
    <i class="icon-euro"></i>
    <span>Betalen</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#uploaden" id="uploaden" class="klantenblokje">
    <i class="icon-upload"></i>
    <span>Bestanden uploaden</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#garantie-reparatie" id="garantie-reparatie" class="klantenblokje">
    <i class="icon-box"></i>
    <span>Garantie en reparatie</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#account" id="account" class="klantenblokje">
    <i class="icon-user"></i>
    <span>Account</span>
  </a>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

.siblings() selects elements in single parent. All your <a> elements have different parents. That's why you can't use .siblings() in this case.

But you may use something like:

$('.klantenblokje').removeClass('activeblok');
$(this).addClass('activeblok');