How to deal with multiple identical sliders?

Question

JavaScript

Data is loaded onto the page using the ejs template engine, from which several blocks are formed (list slider + slider with a large picture, both are connected. Example ). Actually, in the Example you can even see the problem - you poke at one small picture, and both sliders switch.
A minimal example, of course, a site with a problem - here
At first there was an idea in the template engine (there is an output by forEach) to add a class-counter, for example, and then put a slider on it, but ... this is how much I have the same code for different-named sliders write? Not good.
I thought about using jQuery .find() to take an array of elements - sliders and hang a slider on each element of the array. Will it help at all?
Maybe someone has an idea?

Answer 1

Something like this: codepen.io/anon/pen/QpjNMm

Answer 2

give each slider its own ID