Как удалить класс у всех блоков внутри блока с data-* атрибутом?

Question

[Di -]

<div id="block" data-block_id="1">
  <div class="size-buttom">Size 1</div>
  <div class="size-buttom size-active">Size 1</div>
  <div class="size-buttom">Size 1</div>
</div>
<div id="block" data-block_id="2">
  <div class="size-buttom">Size 1</div>
  <div class="size-buttom">Size 1</div>
  <div class="size-buttom size-active">Size 1</div>
</div>

Как при нажатии на кнопку Size внутри data-block_id удалить класс size-active у всех остальных кнопок с классом size-buttom, но только внутри #block?

Пробую так:

$(".size-buttom").click(function() {
      var block = $(this).parents('#block').data('block_id');
      $('[block_id="'+block+'"] .size-buttom').removeClass("size-active");
      $(this).toggleClass("size-active");
  })
});

При нажатии на .size-buttom класс .size-active добавляется, однако removeClass происходит только, если повторно нажать на уже активную .size-buttom.

Comments

[DevMan]

DmitryElshin код в песочнице? не, не слышал.

Answer 1

[DevMan]

если я правильно понял что нужно, то так https://jsfiddle.net/z4mbj7m4/
ну и, кагбе, id должен быть уникальным.