Multiple slideshows on one page makes the first one not work anymore

First of all I know this question's been asked before the answer wasn't solving my problem so I'd like to ask it again: I used a Slideshow code from "W3school" which provides a nice animated jQuery slideshow. unfortunately, I need more than one on my page and the second one stops the first one from working. Even before finding this solution here, I tried changing the CSS and HTML names of the objects of the different slideshows, which successfully solved part of the problem (the second one was not showing) but as mentioned earlier, stopped the first one from working. The slideshow is here but clicking the arrows won't do anything. I slightly understand what the problem is but can't fix it. Here is how I modified the code for the second one:

var slideIndex = 7;
showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides2");
    var dots = document.getElementsByClassName("dot2");
    if (n > slides.length) {
        slideIndex = 1
    }    
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";  
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active2", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active2";
}

As you see I just added '2' for every type of objects in both jQuery and CSS. I guess I have to give different names to commands that multiply but how to do it?

EDIT: https://jsfiddle.net/mgb7k239/ Here is a an example in Jsfiddle but I don't understand why here the first one isn't even a slideshow and the second one doesn't work either. It does on my computer however! And I forgot to say on my computer, clicking arrows on the first slideshow changes pictures on the second one! I replaced the pictures with random ones found on the internet.

Solution

I've created a solution here:

var sliderObjects = [];
createSliderObjects();

function plusDivs(obj, n) {
  var parentDiv = $(obj).parent();
  var matchedDiv;
  $.each(sliderObjects, function(i, item) {
    if ($(parentDiv[0]).attr('id') == $(item).attr('id')) {
      matchedDiv = item;
      return false;
    }
  });
  matchedDiv.slideIndex=matchedDiv.slideIndex+n;
  showDivs(matchedDiv, matchedDiv.slideIndex);
}

function createSliderObjects() {
  var sliderDivs = $('.slider');
  $.each(sliderDivs, function(i, item) {
    var obj = {};
    obj.id = $(item).attr('id');
    obj.divContent = item;
    obj.slideIndex = 1;
    obj.slideContents = $(item).find('.mySlides');
    showDivs(obj, 1);
    sliderObjects.push(obj);
  });
}

function showDivs(divObject, n) {
  debugger;
  var i;
  if (n > divObject.slideContents.length) {
    divObject.slideIndex = 1
  }
  if (n < 1) {
    divObject.slideIndex = divObject.slideContents.length
  }
  for (i = 0; i < divObject.slideContents.length; i++) {
    divObject.slideContents[i].style.display = "none";
  }
  divObject.slideContents[divObject.slideIndex - 1].style.display = "block";
}

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container slider" id="div1">
  <img class="mySlides" src="https://i.imgur.com/eLarayS.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur.com/xpOiMWh.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur.com/lgcC8Y5.jpg" style="width:100%">
  <img class="mySlides" src="http://i.imgur.com/ufmiVTQ.jpg" style="width:100%">

  <a class="w3-btn-floating w3-display-left" onclick="plusDivs(this,-1)">&#10094;</a>
  <a class="w3-btn-floating w3-display-right" onclick="plusDivs(this,1)">&#10095;</a>
</div>

<div class="w3-content w3-display-container slider" id="div2">
  <img class="mySlides" src="https://i.imgur.com/eLarayS.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur.com/xpOiMWh.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur.com/lgcC8Y5.jpg" style="width:100%">
  <img class="mySlides" src="http://i.imgur.com/ufmiVTQ.jpg" style="width:100%">

  <a class="w3-btn-floating w3-display-left" onclick="plusDivs(this, -1)">&#10094;</a>
  <a class="w3-btn-floating w3-display-right" onclick="plusDivs(this, 1)">&#10095;</a>
</div>

you can now add as many divs for sliders with 'slider' class and a unique id.