Generalize a Javascript dropdown function?

Question

Hello, I’m having a certain difficulty to generalize a dropdown function, I imagine I’m doing something very wrong, I searched on forums and did not find the answer so I’ll open this topic.

My code HTML is like this, there are several buttons with the same classes but I want each one to dropdown only to their respective menu:

<a class="sb-dropdown-toggler" href="#" style="border-color: #05204A">
  <i class="fas fa-wrench sb-icon-size"></i><i class="fas fa-caret-down"> 
</i><span>Ferramentas</span>
</a>
<div class="sb-dropdown-menu">
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
</div>

The CSS thus:

.sb-dropdown-menu{
    display: none;
}
.sb-dropdown-menu.dropdown-active{
    display: block;
}

And the Javascript thus:

$('.sb-dropdown-toggler').each(function () {
    $(this).click(function (e){
      e.preventDefault();
      $(this + ' .sb-dropdown-menu').toggleClass("dropdown-active");
    });
  });

My intention is to have the submenu of each button activated only by your "father", is it possible to do this the way I am doing? Do I have to add or remove anything? I tried several ways and could not, I imagine I have to add an ID to each but I do not know how to do it, I appreciate the help of anyone who can

Answer 1

Javascript below should cater to events about target:

$('.sb-dropdown-toggler').click(function (e) {
    e.preventDefault();
    $(this).next().toggleClass("dropdown-active");
});

Not tested, I’m on cell phone. Take a look: https://www.w3schools.com/jquery/jquery_ref_traversing.asp