title: Multiple article slideshow in one section
body: <p>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:</p>
  <p><a href="https://jsfiddle.net/xs43Lb9y/" rel="nofollow noreferrer">https://jsfiddle.net/xs43Lb9y/</a> (you can click in the image to see the slideshow &quot;work&quot;)</p>
  <p>Here is my HTML code</p>
  <pre><code>    &lt;div class=&quot;post-slideWrapper&quot;&gt; //in real life you will have multiple of this in one section
          &lt;ul class=&quot;post-slide&quot;&gt;
              &lt;li class=&quot;active&quot;&gt;
                  &lt;img src=&quot;img/article_bg/slide/4.jpg&quot; alt=&quot;&quot;&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;img src=&quot;img/article_bg/slide/1.jpg&quot; alt=&quot;&quot;&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;img src=&quot;img/article_bg/slide/3.jpg&quot; alt=&quot;&quot;&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class=&quot;post-orderWrapper&quot;&gt;
              &lt;ul class=&quot;post-slideOrder&quot;&gt;
                  &lt;li class=&quot;active&quot;&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  </code></pre>
  <p>Here's my javascript :</p>
  <pre><code>    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 &lt; 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 &lt; 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(() =&gt; { // just prevent spam click thing
                  isAnimation = false;
              }, 800);
              })
  
      }
  </code></pre>
  <p>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.</p>
  <p>I knew the problem is because the <code>cur_pos</code> value. But I don't know how to create one &quot;slideprocess&quot; function so that all the post which have slide on it in my page can use it to function correctly.<br />
  Can anyone give me the solutions, really appreciate it .</p>