title: How make Javascript code work for each element individually, to create multiple duplicates in HTML with same Javascript code
body: <p>I have created a simple image carousel that I am using on my site. </p>
  
  <p>It all works well until I only have one but as soon as I try to create a new one it doesn't work properly. </p>
  
  <p>All I need is that all the image sliders I create are independent of each other.</p>
  
  <p>Both of the sliders should work individually.</p>
  
  <p>Any help would be very great.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//current position
  var pos = 0;
  //number of slides
  var totalSlides = $('.slider-wrap ul li').length;
  //get the slide width
  var sliderWidth = $('.slider-wrap').width();
  
  
  $(document).ready(function(){
   
   
   /*****************
    BUILD THE SLIDER
   *****************/
   //set width to be 'x' times the number of slides
   $('.slider-wrap ul.slider').width(sliderWidth*totalSlides);
   
      //next slide  
   $('.next').click(function(){
    slideRight();
   });
   
   //previous slide
   $('.previous').click(function(){
    slideLeft();
   });
   
   
   
   /*************************
    //*&gt; OPTIONAL SETTINGS
   ************************/
   //automatic slider
   var autoSlider = setInterval(slideRight, 3000);
   
   //for each slide 
   $.each($('.slider-wrap ul li'), function() { 
      //set its color
      var c = $(this).attr("data-color");
      $(this).css("background",c);
      
      //create a pagination
      var li = document.createElement('li');
      $('.pagination-wrap ul').append(li);    
   });
   
   //counter
   countSlides();
   
   //pagination
   pagination();
   
   //hide/show controls/btns when hover
   //pause automatic slide when hover
   $('.slider-wrap').hover(
     function(){ $(this).addClass('active'); clearInterval(autoSlider); }, 
     function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
   );
   
   
  
  });//DOCUMENT READY
   
  
  
  /***********
   SLIDE LEFT
  ************/
  function slideLeft(){
   pos--;
   if(pos==-1){ pos = totalSlides-1; }
   $('.slider-wrap ul.slider').css('left', -(sliderWidth*pos));  
   
   //*&gt; optional
   countSlides();
   pagination();
  }
  
  
  /************
   SLIDE RIGHT
  *************/
  function slideRight(){
   pos++;
   if(pos==totalSlides){ pos = 0; }
   $('.slider-wrap ul.slider').css('left', -(sliderWidth*pos)); 
   
   //*&gt; optional 
   countSlides();
   pagination();
  }
  
  
  
   
  /************************
   //*&gt; OPTIONAL SETTINGS
  ************************/
  function countSlides(){
   $('.counter').html(pos+1 + ' / ' + totalSlides);
  }
  
  function pagination(){
   $('.pagination-wrap ul li').removeClass('active');
   $('.pagination-wrap ul li:eq('+pos+')').addClass('active');
  }
    
   </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*GLOBALS*/
  
  * {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  a {
      text-decoration: none;
      color: #666;
  }
  
  a:hover {
      color: #1bc1a3;
  }
  
  body,
  hmtl {
      background: #ecf0f1;
      font-family: 'Anton', sans-serif;
  }
  
  .wrapper {
      width: 600px;
      margin: 50px auto;
      height: 400px;
      position: relative;
      color: #fff;
      text-shadow: rgba(0, 0, 0, 0.1) 2px 2px 0px;
  }
  
  .slider-wrap {
      width: 600px;
      height: 400px;
      position: relative;
      overflow: hidden;
  }
  
  .slider-wrap ul.slider {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  
  .slider-wrap ul.slider li {
      float: left;
      position: relative;
      width: 600px;
      height: 400px;
  }
  
  .slider-wrap ul.slider li &gt; div {
      position: absolute;
      top: 20px;
      left: 35px;
  }
  
  .slider-wrap ul.slider li &gt; div h3 {
      font-size: 36px;
      text-transform: uppercase;
  }
  
  .slider-wrap ul.slider li &gt; div span {
      font-family: Neucha, Arial, sans serif;
      font-size: 21px;
  }
  
  .slider-wrap ul.slider li i {
      text-align: center;
      line-height: 400px;
      display: block;
      width: 100%;
      font-size: 90px;
  }
  
  .object-fit_contain {
      object-fit: contain;
      height: auto;
      max-width: 600px;
  }
  
  
  /*btns*/
  
  .btns {
      position: absolute;
      width: 50px;
      height: 60px;
      top: 50%;
      margin-top: -25px;
      line-height: 57px;
      text-align: center;
      cursor: pointer;
      z-index: 100;
      -webkit-user-select: none;
      -moz-user-select: none;
      -khtml-user-select: none;
      -ms-user-select: none;
      -webkit-transition: all 0.1s ease;
      -moz-transition: all 0.1s ease;
      -o-transition: all 0.1s ease;
      -ms-transition: all 0.1s ease;
      transition: all 0.1s ease;
  }
  
  .next {
      right: -1px;
      margin-right: 200px;
  }
  
  .previous {
      left: -1px;
      margin-left: 200px;
  }
  
  .counter {}
  
  .slider-wrap.active .next {
      right: 0px;
  }
  
  .slider-wrap.active .previous {
      left: 0px;
  }
  
  
  /*bar*/
  
  .pagination-wrap {
      min-width: 20px;
      margin-top: 350px;
      margin-left: auto;
      margin-right: auto;
      height: 15px;
      position: relative;
      text-align: center;
  }
  
  .pagination-wrap ul {
      width: 100%;
  }
  
  .pagination-wrap ul li {
      margin: 0 4px;
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #3ab8cb;
      opacity: 0.5;
      position: relative;
      top: 0;
  }
  
  .pagination-wrap ul li.active {
      width: 12px;
      height: 12px;
      top: 3px;
      opacity: 1;
      box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px;
  }
  
  
  /*Header*/
  
  h1,
  h2 {
      text-shadow: none;
      text-align: center;
  }
  
  h1 {
      color: #666;
      text-transform: uppercase;
      font-size: 36px;
  }
  
  h2 {
      color: #7f8c8d;
      font-family: Neucha, Arial, sans serif;
      font-size: 18px;
      margin-bottom: 30px;
  }
  
  
  /*ANIMATION*/
  
  .slider-wrap ul,
  .pagination-wrap ul li {
      -webkit-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
      -moz-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
      -o-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
      -ms-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
      transition: all 0.3s cubic-bezier(1, .01, .32, 1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- ###########################  Slider 1  ##########################--&gt;
  
  &lt;div class="slider-wrap"&gt;
      &lt;ul class="slider"&gt;
          &lt;li&gt;
              &lt;img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg"&gt;
          &lt;/li&gt;
  
          &lt;li&gt;
              &lt;img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg"&gt;
          &lt;/li&gt;
  
      &lt;/ul&gt;
  
      &lt;!--controls--&gt;
      &lt;div class="pagination-wrap"&gt;
          &lt;div class="btns next"&gt;&lt;i class="fas fa-greater-than"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;div class="counter"&gt;&lt;/div&gt;
          &lt;div class="btns previous"&gt;&lt;i class="fas fa-less-than"&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!--controls--&gt;
  
  &lt;/div&gt;
  
  &lt;!-- ###########################  Slider 2  ##########################--&gt;
  
  &lt;div class="slider-wrap"&gt;
      &lt;ul class="slider"&gt;
          &lt;li&gt;
              &lt;img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg"&gt;
          &lt;/li&gt;
  
          &lt;li&gt;
              &lt;img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg"&gt;
          &lt;/li&gt;
  
      &lt;/ul&gt;
  
      &lt;!--controls--&gt;
      &lt;div class="pagination-wrap"&gt;
          &lt;div class="btns next"&gt;&lt;i class="fas fa-greater-than"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;div class="counter"&gt;&lt;/div&gt;
          &lt;div class="btns previous"&gt;&lt;i class="fas fa-less-than"&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!--controls--&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>