Using an Image Slider twice on the same page

My approach (take it as such) would be simply generating a unique ID which will differentiate each slider.
That’s anyway a good practice when the same functionality can potentially be displayed multiple times on the same page.

First, find a way to generate an incremental $id to use in your template. Maybe an instanciation ID… This really depends on the way you’ve implemented your solution, I can’t say more from the supplied info.

Then, in your template, add a section’s id attribute:

echo '<section id="slider_' . $id . '" class="slider">';

Then, in your JS script:

Get the parent <section>‘s id attribute of the hovered button, let’s call it $section_id.

Then change your selector to:

$("#$section_id .next").click(function () {});