Multiple Siema Carousels with controller on current page

I am trying to have two Siema carousels on the same page with each carousel to have a "next" and a "previous" button, but when I mix and mash the javaScript snippet, the controller does not work. Any ideas what did I do wrong?

Here is my code:

$('.menu .item')  .tab();

const siemas = document.querySelectorAll('.siema');

const prev = document.querySelector('.prev');
const next = document.querySelector('.next');

prev.addEventListener('click', () => siemas.prev());
next.addEventListener('click', () => siemas.next());

// this is fairly new way of looping through DOM Elements
// More about ithere: https://pawelgrzybek.com/loop-through-a-collection-of-dom-elements/
// For better compatibility I suggest using for loop
for(const siema of siemas) {
  new Siema({
    selector: siema,
    perPage: 3,
  })
}