Two Manual Slider in HTML

I am currently trying to add two(2) manual slider with a small dots that user can click to switch image. The left and right arrow seems to work but the small dots did not.

The left and right will move to the next or the previous image in the slider. The number of small dots is the same as the number of images in the slider. User can click on the small dots to view the image.

This is the HTML snippet for the slider

<!DOCTYPE html>
<html>
<head>
    <title>W3.CSS</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
    <style>
        .mySlides {display:none}
        .w3-left, .w3-right, .w3-badge {cursor:pointer}
        .w3-badge {height:13px;width:13px;padding:0}
    </style>
</head>
<body>
    <h2 class="w3-center">Manual Slideshow</h2>
    <div class="w3-content w3-display-container">
        <img class="mySlides1" src="img/image1.jpg" style="width:100%">
        <img class="mySlides1" src="img/image2.jpg" style="width:100%">
        <img class="mySlides1" src="img/image3.png" style="width:100%">
        <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)">&#10094;</button>
        <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)">&#10095;</button>
        <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1, 0)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2, 0)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3, 0)"></span>
        </div>
    </div>
    <br>
    <div class="w3-content w3-display-container">
        <img class="mySlides2" src="img/image1.jpg" style="width:100%">
        <img class="mySlides2" src="img/image2.jpg" style="width:100%">
        <img class="mySlides2" src="img/image3.png" style="width:100%">
        <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 1)">&#10094;</button>
        <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 1)">&#10095;</button>
        <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1, 1)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2, 1)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3, 1)"></span>
        </div>
    </div>
</body>

This is the Script snippet for the slider

<script>
        var slideIndex = [1,1];
        var slideId = ["mySlides1", "mySlides2"]
        showDivs(1, 0);
        showDivs(1, 1);

        function plusDivs(n, no) {
            showDivs(slideIndex[no] += n, no);
        }

        function currentDiv(n, no) {
            showDivs(slideIndex[no] = n, no);
        }

        function showDivs(n, no) {
            var i;
            var x = document.getElementsByClassName(slideId[no]);
            var dots = document.getElementsByClassName("demo");

            if (n > x.length) {slideIndex[no] = 1}
                if (n < 1) {slideIndex[no] = x.length}
                    for (i = 0; i < x.length; i++) {
                        x[i].style.display = "none";  
                    }
                    for (i = 0; i < dots.length; i++) {
                        dots[i].className = dots[i].className.replace(" w3-white", "");
                    }
            x[slideIndex[no]-1].style.display = "block"; 
            dots[slideIndex[no]-1].className += " w3-white";
        }
</script>