Solution 1 :

What I did was close your code in a function. Then script call this function for each slideshow.

Example:

var wrappers = document.querySelectorAll('.post-slideWrapper');
for (var i = 0; i < wrappers.length; i++) {
    slideShow(wrappers[i]);
}

function slideShow(wrap) {

    var slide_post = wrap.querySelector('.post-slide'); //get the post slide (which will have multiple )           
    var bullet_list = wrap.querySelector('.post-slideOrder'); //for add style to the bullet
    var cur_pos = 0; // This is the one that cause the problem
    var isAnimation = false; // just prevent spam click thing
    var bullet_child;
    var slide_child;
    // console.log(bullet_list);

    slide_post.addEventListener('click', function () {
        slide_child = this.children;
        bullet_child = bullet_list.children;


        if (isAnimation) { // just prevent spam click thing
            return false;
        }
        isAnimation = true;

        // responsible for the move slide (assume the initial state is hidden , only the one which active is show)
        slide_child[cur_pos].classList.remove('active');
        bullet_child[cur_pos].classList.remove('active');
        if (cur_pos < slide_child.length - 1) {
            cur_pos++;
        } else {
            cur_pos = 0;
        }
        slide_child[cur_pos].classList.add('active');
        bullet_child[cur_pos].classList.add('active');


        setTimeout(() => { // just prevent spam click thing
            isAnimation = false;
        }, 800);
    })

}
.content__post {
    max-width: 300px;
    background-color: white;
    display: block;
    width: 100%;
    padding-bottom: 20px;
    margin: 0 auto;
    margin-bottom: 30px;
    transition: all 0.3s ease-in-out;
}

/* POST SLIDE */
.post-slideWrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.post-orderWrapper {}

.post-slideOrder {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-33px);
    display: flex;
    list-style-type: none;
    align-items: center;
    cursor: pointer;
    z-index: 5;
}

.post-slideOrder li {
    width: 12px;
    height: 12px;
    background-color: black;
    border-radius: 50%;
    margin: 0 5px;
    transition: 0.3s ease-in-out;
}

.post-slideOrder li:hover {
    background-color: white;
}

.post-slideOrder .active {
    background-color: white;
}

.post-slide {
    width: 300%;
    position: relative;
    display: flex;
    cursor: pointer;
    list-style-type: none;
}

.post-slide>li {
    width: 100%;
    position: relative;
    top: 0;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.post-slide>li:nth-child(1) {
    left: 0;

}

.post-slide>li:nth-child(2) {
    left: -33.3333333%;

}

.post-slide>li:nth-child(3) {
    left: -66.6666666%;
}

.post-slide>.active {
    opacity: 1;
    z-index: 1;
}

.post-slide img {
    max-width: 100%;
    display: block;
}

/* END POST SLIDE  */
<!-- in real life you will have multiple of this in one section -->
<div class="post-slideWrapper">
    <ul class="post-slide">
        <li class="active">
            <img src="https://images.unsplash.com/photo-1605797654030-3a167bdf0c67?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDY3fEo5eXJQYUhYUlFZfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                alt="">
        </li>
        <li>
            <img src="https://images.unsplash.com/photo-1607053810523-091ed202189a?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDc1fEo5eXJQYUhYUlFZfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                alt="">
        </li>
        <li>
            <img src="https://images.unsplash.com/photo-1607462109225-6b64ae2dd3cb?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDY2fEo5eXJQYUhYUlFZfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                alt="">
        </li>
    </ul>
    <div class="post-orderWrapper">
        <ul class="post-slideOrder">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>


<!-- in real life you will have multiple of this in one section -->
<div class="post-slideWrapper">
    <ul class="post-slide">
        <li class="active">
            <img src="https://images.unsplash.com/photo-1605797654030-3a167bdf0c67?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDY3fEo5eXJQYUhYUlFZfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                alt="">
        </li>
        <li>
            <img src="https://images.unsplash.com/photo-1607053810523-091ed202189a?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDc1fEo5eXJQYUhYUlFZfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                alt="">
        </li>
        <li>
            <img src="https://images.unsplash.com/photo-1607462109225-6b64ae2dd3cb?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDY2fEo5eXJQYUhYUlFZfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                alt="">
        </li>
    </ul>
    <div class="post-orderWrapper">
        <ul class="post-slideOrder">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

Problem :

I am currently working on a blog website in the post section you will have multiple post title which include some has slideimage on it like this:

https://jsfiddle.net/xs43Lb9y/ (you can click in the image to see the slideshow “work”)

Here is my HTML code

    <div class="post-slideWrapper"> //in real life you will have multiple of this in one section
        <ul class="post-slide">
            <li class="active">
                <img src="img/article_bg/slide/4.jpg" alt="">
            </li>
            <li>
                <img src="img/article_bg/slide/1.jpg" alt="">
            </li>
            <li>
                <img src="img/article_bg/slide/3.jpg" alt="">
            </li>
        </ul>
        <div class="post-orderWrapper">
            <ul class="post-slideOrder">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

Here’s my javascript :

    var slide_post = document.querySelectorAll('.post-slide'), //get the post slide (which will have multiple )           
        bullet_list = document.querySelectorAll('.post-slideOrder'), //for add style to the bullet
        cur_pos = 0, // This is the one that cause the problem
        isAnimation = false; // just prevent spam click thing
    console.log(bullet_list);
    for (let i = 0; i < slide_post.length; i++) {
        slide_post[i].addEventListener('click', function () {
            var slide_child = this.children,
                bullet_child = bullet_list[i].children;


            if (isAnimation) { // just prevent spam click thing
                return false;
            }
            isAnimation = true; 

            // responsible for the move slide (assume the initial state is hidden , only the one which active is show)
            slide_child[cur_pos].classList.remove('active');
            bullet_child[cur_pos].classList.remove('active');
            if(cur_pos < slide_child.length-1) {
                cur_pos++;
            } else {
                cur_pos = 0;
            }
            slide_child[cur_pos].classList.add('active');
            bullet_child[cur_pos].classList.add('active');


            setTimeout(() => { // just prevent spam click thing
                isAnimation = false;
            }, 800);
            })

    }

The code I have written only work if there’s only one slide post (which is something never happen in real blog website ). when I’m adding more than one post that have slide, then it’ll working incorrectly.

I knew the problem is because the cur_pos value. But I don’t know how to create one “slideprocess” function so that all the post which have slide on it in my page can use it to function correctly.
Can anyone give me the solutions, really appreciate it .

By