Simple menu with descriptions
One purpose for using jQuery is the ability to chain methods. You can first remove the "active-element" class from .d, then utilize .filter() with a single line passed as parameter within a template literal which removes the "active-filter" class from .b elements, filters and adds the same class to this element, and concludes by returning the .data() of the current element, which is the attribute value selector to match the corresponding .d element where the "active-element" class is added.



$(".b").click(function(e) {
  $(".d").removeClass("active-element")
  .filter(`[data-filter='${
    $(".b").removeClass("active-filter")
    .filter(this).addClass("active-filter")
    .data().filter
   }']`)
  .addClass("active-element");
});
.b {
  width: 60px;
  height: 60px;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  float: left;
}

.c {
  width: 60px;
  height: 60px;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  float: left;
}

.element {
  float: left;
  display: block;
}

.active-filter {
  background-color: pink;
}

.active-element {
  background-color: yellow;
}
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="element"&gt;
  &lt;div&gt;
    &lt;div class="b active-filter" data-filter="3"&gt;data-filter&lt;/div&gt;
    &lt;div class="b" data-filter="4"&gt;data-filter&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;div class="c d" data-filter="3"&gt;data-element&lt;/div&gt;
    &lt;div class="c d" data-filter="4"&gt;data-element&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;