Image Slider is not working properly

Question

I want my javascript to work separately with both id="wrapper" and id="wrapper2" but it is not doing so.....i really don't know what to do next pls help...is i am doing something wrong or i have to make different javascripts for my different image sliders on same page. or any editing in this code will help??

<div id="wrapper">

            <div class="slides">
                <img src="slide1/1.jpeg" alt="image" width="100%" height="100%"/>
            </div>    
            <div class="slides">
                <img src="slide1/2.jpeg" alt="image" width="100%" height="100%"/>
            </div>
            <div class="slides">
                <img src="slide1/3.jpeg" alt="image" width="100%" height="100%"/>
            </div>

            <button class="btn" onclick="plusIndex(1)" id="btn1">&#10094</button>
            <button class="btn" onclick="plusIndex(-1)" id="btn2">&#10095</button>

    </div>
    <div id="wrapper2">

            <div class="slides">
                <img src="slide2/1.jpeg" alt="image" width="100%" height="100%"/>
            </div>    
            <div class="slides">
                <img src="slide2/2.jpeg" alt="image" width="100%" height="100%"/>
            </div>
            <div class="slides">
                <img src="slide2/3.jpeg" alt="image" width="100%" height="100%"/>
            </div>

            <button class="btn" onclick="plusIndex(1)" id="btn1">&#10094</button>
            <button class="btn" onclick="plusIndex(-1)" id="btn2">&#10095</button>

    </div>

here is the javascript

var index = 1;

        function plusIndex(n){
            index = index + n;
            showImage(index);
        }


        showImage(index);

        function showImage(n){
            var i;
            var x = document.getElementsByClassName("slides");
            if(n > x.length){
                index = 1;
            }
            if(n <=0 ){
                index = x.length;
            }
            for(i=0; i<x.length;i++){
                x[i].style.display = "none";
            }
            x[index - 1].style.display = "block";
        }

Answer 1

In your html put the class name of the wrapper in your plusIndex call, thus:

<button class="btn" onclick="plusIndex(1, 'wrapper')" id="btn1">&#10094</button>
<button class="btn" onclick="plusIndex(-1, 'wrapper')" id="btn2">&#10095</button>

and

<button class="btn" onclick="plusIndex(1, 'wrapper2')" id="btn1">&#10094</button>
<button class="btn" onclick="plusIndex(-1, 'wrapper2')" id="btn2">&#10095</button>

Then in the js, keep an associative array for index, not a single number, thus:

var indexes = {'wrapper': 1, 'wrapper2': 1};

then the rest is easy:

function plusIndex(n, id){
            indexes[id] += n;
            showImage(indexes[id], id);
        }

        function showImage(n, id){
            var i;
            var el = document.getElementById(id);
            var x = el.querySelector('slides');
            if(n > x.length){
                indexes[id] = 1;
            }
            if(n <=0 ){
                indexes[id] = x.length;
            }
            for(i=0; i<x.length;i++){
                x[i].style.display = "none";
            }
            x[indexes[n] - 1].style.display = "block";
        }

Haven't tested the code, but should get you there mostly.