Toggle elements inside elements with jQuery

Question

I want to learn a way to toggle on a list within a list in a very efficient way in jQuery.
The way I tried doesn’t work because when firing the toggle at one, everyone is affected. It would be too much work to do for each list and its respective lists.

In short. How can I fire a toggle at lists without firing the others.

Here’s the way I tried

Demo: HERE

---

//Btn que dispara
jQuery('li.cat-parent > a:nth-child(1)').after('<i class="icon-toggle-cat">+</i>');

//Toggle
jQuery('.icon-toggle-cat').on('click', function(){			
    jQuery('li.cat-parent > ul.children').toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="product-categories">
<li class="cat-item cat-item-61 cat-parent">
   <a href="#">Cachorros</a>
   <ul class="children">
<li class="cat-item cat-item-48"><a href="">Ambiente</a></li>
<li class="cat-item cat-item-52 cat-parent">
   <a href="">Farmácia</a>
   <ul class="children">
      <li class="cat-item cat-item-54"><a href="">Antipulgas</a></li>
      <li class="cat-item cat-item-53"><a href="">Vermífugo</a></li>
      <li class="cat-item cat-item-55"><a href="">Vitaminas</a></li>
   </ul>
</li>
<li class="cat-item cat-item-35 cat-parent">
   <a href="">Higiene</a>
   <ul class="children">
      <li class="cat-item cat-item-38"><a href="">Tapete</a></li>
   </ul>
</li>
<li class="cat-item cat-item-33"><a href="">Petiscos</a></li>
<li class="cat-item cat-item-21 cat-parent">
   <a href="">Rações</a>
   <ul class="children">
<li class="cat-item cat-item-133"><a href="">Fórmula Natural</a></li>
<li class="cat-item cat-item-130"><a href="">Golden</a></li>
<li class="cat-item cat-item-145 cat-parent">
   <a href="">Gran Plus</a>
   <ul class="children">
      <li class="cat-item cat-item-156"><a href="">Adulto Mini</a></li>
      <li class="cat-item cat-item-157"><a href="">Adulto RM</a></li>
      <li class="cat-item cat-item-155"><a href="">Filhote Mini</a></li>
      <li class="cat-item cat-item-154"><a href="">Filhote RM</a>
   </ul>

Answer 1

Basically I changed the javascript, you’re a selector who was picking everyone up, you’d have to pick up the relative event click for that I used the this of the event which at that time is the <i class='...'>+</i> being like this:

jQuery(this).parent().find('> ul.children').toggle();

// Explicação 
//  jQuery(this) ou $(this) => neste momento o this e o elemento que foi clicado
//  .parent() => aqui eu pego o pai do elemento
//  .find('> ul.children') => usando com base o pai eu busco por ul.children 

jQuery('li.cat-parent > a:nth-child(1)').after('<i class="icon-toggle-cat">+</i>');

jQuery('.icon-toggle-cat').on('click', function(){
    jQuery(this).parent().find('> ul.children').toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="product-categories">
<li class="cat-item cat-item-61 cat-parent">
   <a href="#">Cachorros</a>
   <ul class="children">
<li class="cat-item cat-item-48"><a href="">Ambiente</a></li>
<li class="cat-item cat-item-52 cat-parent">
   <a href="">Farmácia</a>
   <ul class="children">
      <li class="cat-item cat-item-54"><a href="">Antipulgas</a></li>
      <li class="cat-item cat-item-53"><a href="">Vermífugo</a></li>
      <li class="cat-item cat-item-55"><a href="">Vitaminas</a></li>
   </ul>
</li>
<li class="cat-item cat-item-35 cat-parent">
   <a href="">Higiene</a>
   <ul class="children">
      <li class="cat-item cat-item-38"><a href="">Tapete</a></li>
   </ul>
</li>
<li class="cat-item cat-item-33"><a href="">Petiscos</a></li>
<li class="cat-item cat-item-21 cat-parent">
   <a href="">Rações</a>
   <ul class="children">
<li class="cat-item cat-item-133"><a href="">Fórmula Natural</a></li>
<li class="cat-item cat-item-130"><a href="">Golden</a></li>
<li class="cat-item cat-item-145 cat-parent">
   <a href="">Gran Plus</a>
   <ul class="children">
      <li class="cat-item cat-item-156"><a href="">Adulto Mini</a></li>
      <li class="cat-item cat-item-157"><a href="">Adulto RM</a></li>
      <li class="cat-item cat-item-155"><a href="">Filhote Mini</a></li>
      <li class="cat-item cat-item-154"><a href="">Filhote RM</a>
   </ul>
</li>

Tree Traversal