How to Set the Multi Sliders in One Page

// We have to declare the function for all the sliders 

// get all slider from document.
const slideContainer = document.querySelectorAll('.slider');

// lets put your function to every one of them
for(let i = 0; i < slideContainer.length; i++){

    const slider = function () {
        // const this_slider = this;
        const slides = slideContainer[i].querySelectorAll('.slide');  // Your code was : const slides = document.querySelectorAll('.slide');  don't search the entire document, only search the slider
        const btnLeft = slideContainer[i].querySelector('.slider__btn--left');
        const btnRight = slideContainer[i].querySelector('.slider__btn--right');
        const dotContainer = slideContainer[i].querySelector('.dots');
      
        let curSlide = 0;
        const maxSlide = slides.length;
      
        // Functions
        const createDots = function () {
                slides.forEach(function (_, i) {
                dotContainer.insertAdjacentHTML(
                'beforeend',
                `<button class="dots__dot" data-slide="${i}"></button>`
                );
            });
        };
      
        const activateDot = function (slide) {
            slideContainer[i]
                .querySelectorAll('.dots__dot')
                .forEach(dot => dot.classList.remove('dots__dot--active'));
        
            slideContainer[i]
                .querySelector(`.dots__dot[data-slide="${slide}"]`)
                .classList.add('dots__dot--active');
        };
      
        const goToSlide = function (slide) {
            slides.forEach(
                (s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
            );
        };
      
        // Next slide
        const nextSlide = function () {
            if (curSlide === maxSlide - 1) {
                curSlide = 0;
            } else {
                curSlide++;
            }
        
            goToSlide(curSlide);
            activateDot(curSlide);
        };
      
        const prevSlide = function () {
            if (curSlide === 0) {
                curSlide = maxSlide - 1;
            } else {
                curSlide--;
            }
            goToSlide(curSlide);
            activateDot(curSlide);
        };
      
        const init = function () {
            goToSlide(0);
            createDots();
        
            activateDot(0);
        };
        init();
      
        // Event handlers
        btnRight.addEventListener('click', nextSlide);
        btnLeft.addEventListener('click', prevSlide);
      
        document.addEventListener('keydown', function (e) {
            if (e.key === 'ArrowLeft') prevSlide();
            e.key === 'ArrowRight' && nextSlide();
        });
      
        dotContainer.addEventListener('click', function (e) {
            if (e.target.classList.contains('dots__dot')) {
                const { slide } = e.target.dataset;
                goToSlide(slide);
                activateDot(slide);
            }
        });
    };
    slider();
}

/* SLIDER */
.slider {
    max-width: 100rem;
    height: 50rem;
    margin: 0 auto;
    position: relative;
  
    /* IN THE END */
    overflow: hidden;
  }
  
  .slide {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50rem;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    /* THIS creates the animation! */
    transition: transform 1s;
  }
  
  .slide > img {
    /* Only for images that have different size than slide */
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .slider__btn {
    position: absolute;
    top: 50%;
    z-index: 10;
  
    border: none;
    background-color: black;                // your was "inherit" . changed this for my visibility. 
    /* background: rgba(255, 255, 255, 0.7); */
    font-family: inherit;
    color: white;
    border-radius: 50%;
    height: 5.5rem;
    width: 5.5rem;
    font-size: 3.25rem;
    cursor: pointer;
  }
  
  .slider__btn--left {
    left: 6%;
    transform: translate(-50%, -50%);
  }
  
  .slider__btn--right {
    right: 6%;
    transform: translate(50%, -50%);
  }
  
  .dots {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }
  
  .dots__dot {
    border: none;
    background-color: #b9b9b9;
    opacity: 0.7;
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    margin-right: 1.75rem;
    cursor: pointer;
    transition: all 0.5s;
  
    /* Only necessary when overlying images */
    /* box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7); */
  }
  
  .dots__dot:last-child {
    margin: 0;
  }
  
  .dots__dot--active {
    /* background-color: #fff; */
    background-color: blue;
    opacity: 1;
  }
  
  .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
  }
  
  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a grey background color */
  .prev:hover,
  .next:hover {
    background-color: #f1f1f1;
    color: black;
  }

<div class="slider">
        <div class="slide">
            <img src="img/img-1.jpg" alt="Sample Image">
        </div>

        <div class="slide">
            <img src="img/img-2.jpg" alt="Sample Image">
        </div>

        <div class="slide">
            <img src="img/img-3.jpg" alt="Sample Image">
        </div>

        <div class="slide">
            <img src="img/img-4.jpg" alt="Sample Image">
        </div>

        <button class="slider__btn slider__btn--left">❮</button>
        <button class="slider__btn slider__btn--right">❯</button>
        <div class="dots"></div>
    </div>

    <hr> <!-- This to separate the slider (optional)-->

    <div class="slider">
        <div class="slide">
            <img src="img/img-1.jpg" alt="Sample Image">
        </div>

        <div class="slide">
            <img src="img/img-2.jpg" alt="Sample Image">
        </div>

        <div class="slide">
            <img src="img/img-3.jpg" alt="Sample Image">
        </div>

        <div class="slide">
            <img src="img/img-4.jpg" alt="Sample Image">
        </div>

        <button class="slider__btn slider__btn--left">❮</button>
        <button class="slider__btn slider__btn--right">❯</button>
        <div class="dots"></div>
    </div>

    <hr> <!-- This to separate the slider (optional)-->

    <div class="slider">
        <div class="slide">
            <img src="img/img-1.jpg" alt="Sample Image">
        </div>

        <div class="slide">
            <img src="img/img-2.jpg" alt="Sample Image">
        </div>

        <div class="slide">
            <img src="img/img-3.jpg" alt="Sample Image">
        </div>

        <div class="slide">
            <img src="img/img-4.jpg" alt="Sample Image">
        </div>

        <button class="slider__btn slider__btn--left">❮</button>
        <button class="slider__btn slider__btn--right">❯</button>
        <div class="dots"></div>
    </div>

Multiple Jquery simple sliders on one page

First thing first. To apply this code to both named slider divs, you can do this:

$(document).ready(function() {
    $('#slider').slajder();
    $('#slider2').slajder();
});

Thus, you're putting the slider functionality onto each of the two blocks, separately.

(gillyspy's one-line way of doing this is better; I did them separately only because it makes the concept more obvious)

Try that first in your fiddle. It won't quite work, but it will fail in an interesting way, so go ahead and look at it.

The buttons were all affecting the second block. To understand why, you need to know about the scoping of variables in Javascript. (There are lots of explanations out there; one is http://www.digital-web.com/articles/scope_in_javascript/). The simple explanation here, however, is that variables that are implicitly declared have global scope. That means that when you applied the slajder function to the second block, the implicitly declared variables inside it were global and overwrote the (global) ones declared for the first block.

The solution is to declare them with 'var', so they'll be local:

var slides = slider.children(".slides");
var dots = slider.children(".dots");
var dot = dots.children("span");
var dot1 = dots.children("span:first-child");
var dot2 = dots.children("span:nth-child(2)");

dot3 and dot4 in the fiddle, as you seem to have already realized, are extraneous...you don't need them.

How to use multiple sliders with the same id on the same page?

In the published code you do not have elements with the same ID.
I made a change to your JS code and I think it will work for you.

I add a unique CLASS to the wrap elements so that the function can call the HTML code according to the unique class

var allWrap = document.getElementsByClassName('slider');

for (var i = 0; i < allWrap.length; i++) {
    allWrap[i].classList.add('mySlider_' + i);

    var slider = new Slider('.mySlider_' + i);
    slider.addListeners();
}


function Slider(newclass) {
    this.buttons = document.querySelectorAll(newclass + ' button');
    this.items = document.querySelectorAll(newclass + ' .item');
    this.activeItem = 0;
    this.isSliding = false;

    this.addListeners = function () {
        this.buttons.forEach(el => el.addEventListener("click", this.slide))
    }

    this.slide = event => {
        if (!this.isSliding) {
            this.isSliding = true;
            var currentItem = this.activeItem;

            if (event.target === this.buttons[1]) {
                this.activeItem === this.items.length - 1 ? this.activeItem = 0 : this.activeItem++;
                //active slide out left
                this.items[currentItem].classList.add('active-left');
                //next slide in left
                this.items[this.activeItem].classList.add('item-next', 'item-left');
                //remove classes
                setTimeout(() => {
                    this.items[currentItem].classList.remove('active-left', 'active');
                    this.items[this.activeItem].classList.remove('item-next', 'item-left');
                    //set new active item
                    this.items[this.activeItem].classList.add('active');
                    this.isSliding = false;
                }, 1000)
            } else {
                this.activeItem === 0 ? this.activeItem = this.items.length - 1 : this.activeItem--;
                //active slide out right
                this.items[currentItem].classList.add('active-right');
                //prev slide in right
                this.items[this.activeItem].classList.add('item-prev', 'item-right');
                //remove classes
                setTimeout(() => {
                    this.items[currentItem].classList.remove('active-right', 'active');
                    this.items[this.activeItem].classList.remove('item-prev', 'item-right');
                    //set new active item
                    this.items[this.activeItem].classList.add('active');
                    this.isSliding = false;
                }, 1000)
            }
        }
    }
}

.slider {
    display: flex;
    position: relative;

}
.next, .prev {
    border: none;
    border-radius: 5px;
    background: none;
    font-size: 30px;
    background-color: #eee;
}
.next:hover,
.prev:hover {
    background-color: #ddd;
}
.prev {
    order: 1;
}
.inner {
    position: relative;
    flex-grow: 1;
    order: 2;
    overflow: hidden;
    white-space: nowrap;
}
.next {
    order: 3;
}
.item {
    width: 100%;
    position: absolute;
    display: none;
}
.image {
    width: 23%;
    margin: 0 1%;
    display: inline-block;
}
img {
    width: 100%;
}

.active {
    position: relative;
    display: block;
}
.item-next,
.item-prev {
    top: 0;
    display: block;
    z-index: 1;
}
.item-next {
    left: 100%;
}
.item-prev {
    left: -100%;
}
.item-left {
    animation: slideInLeft 1s forwards;
}

.item-right {
    animation: slideInRight 1s forwards;
}

.active-left {
    animation: slideOutLeft 1s forwards;
}
.active-right {
    animation: slideOutRight 1s forwards;
}


@keyframes slideInLeft {
    from {left:100%;}
    to {left:0;}
}

@keyframes slideInRight {
    from {left:-100%;}
    to {left:0;}
}

@keyframes slideOutLeft {
    from {left:0;}
    to {left:-100%;}
}

@keyframes slideOutRight {
    from {left:0;}
    to {left:100%;}
}

<div class="slider">
    <div class="inner">
        <div class="item active">
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
        </div>
        <div class="item">
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
        </div>
    </div>
    <button class="prev"><</button>
    <button class="next">></button>
</div>



<div class="slider">
    <div class="inner">
        <div class="item active">
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
        </div>
        <div class="item">
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
            <div class="image">
                <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80"
                    alt="kotek">
            </div>
        </div>
    </div>
    <button class="prev"><</button>
    <button class="next">></button>
</div>