Add class to children on click - html

Question

<ul class="categories-menu">
<li class="cat-item">
A
<ul class="children">
<li class="cat-item">
<i class="fas fa-plus open"><-- This elment should expand children on click -->
A-CHILD
</li>
</ul>
</li>
</ul>
<ul class="categories-menu">
<li class="cat-item">
A
<ul class="children">
<li class="cat-item">
<i class="fas fa-plus open"> <-- This elment should expand children on click -->
A-CHILD
</li>
</ul>
</li>
</ul>
I try to add class open to submenu, when I click in specific .
Now all items with class submenu will open when I click on .
I want to open just closest submenu.
(function($){
$('.open').click(function(){
($(this).next().find('.children').length)
$('.children').addClass('opened');
});
})(jQuery);
EDIT:
var elems = document.getElementsByClassName("open");
Array.from(elems).forEach(v => v.addEventListener('click', function() {
this.parentElement.getElementsByClassName('children')[0].toggleClass('opened');
}));
How to add slideDown/slideUp.
I have console error: slideDown is undefined when I try add it.