title: Jquery Jquery-UI Range Slider .each(function(){}); not works fine and slowly
body: <p>I want to write a jquery function, that finds every .arti-carousel-ui-slider div and create a jquery ui range slider. It works not realy fine. The second slider object works fine, but in the first the slider didn`t change the values.</p>
  
  <p>Here the CODE:</p>
  
  <pre><code>&lt;div class="column col-xl-6 col-lg-6 col-md-6 col-sm-12"&gt; //PHP Code First Element
  &lt;div class="arti-carousel-ui-slider"&gt;
  &lt;label for="arti_carousel_tab_items_distance"&gt;'.__('Distance Carousel-Items', 'arti-carousel').'&lt;/label&gt;
  &lt;input type="hidden" name="arti_carousel_tab_items_distance" value="'.esc_html(get_post_meta($post-&gt;ID, 'arti_carousel_tab_items_distance', true)).'"&gt;
  &lt;div class="arti-carousel-ui-slider-slidebar" data-value="20" data-max="120" data-step="5"&gt;&lt;/div&gt;
  &lt;p&gt;'.__('The space between the Carousel-Items in px: ', 'arti-carousel').'&lt;span class="slider-value"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;                                    
  &lt;/div&gt; 
  
  &lt;div class="column col-xl-6 col-lg-6 col-md-6 col-sm-12"&gt; //PHP Code Second Element
  &lt;div class="arti-carousel-ui-slider"&gt;
  &lt;label for="arti_carousel_tab_formattings_items_headline_fontsize"&gt;'.__('Headline Font-Size Carousel Item', 'arti-carousel').'&lt;/label&gt;
  &lt;input type="hidden" name="arti_carousel_tab_formattings_items_headline_fontsize" value="'.esc_html(get_post_meta($post-&gt;ID, 'arti_carousel_tab_formattings_items_headline_fontsize', true)).'"&gt;
  &lt;div class="arti-carousel-ui-slider-slidebar" data-value="18" data-max="50" data-step="1"&gt;&lt;/div&gt;
  &lt;p&gt;'.__('The Font-Size is set to: ', 'arti-carousel').'&lt;span class="slider-value"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  //JavaScript Code
  jQuery(document).ready(function ($) {
  var countslide = 0;
   $(".arti-carousel-ui-slider").each(function(){
          countslide = countslide + 1;
          $(this).attr("data-id",countslide);
          $(this).find( '.slider-value' ).attr("data-id",countslide);
          $(this).find('.arti-carousel-ui-slider-slidebar').attr("data-id",countslide);
          $('.arti-carousel-ui-slider-slidebar[data-id='+countslide+']').slider(
              {
                  value:$('.arti-carousel-ui-slider-slidebar[data-id='+countslide+']').attr("data-value"),
                  min: 0,
                  max: $('.arti-carousel-ui-slider-slidebar[data-id='+countslide+']').attr("data-max"),
                  step: $('.arti-carousel-ui-slider-slidebar[data-id='+countslide+']').attr("data-step"),
                  slide: function( event, ui ) {
                      $( '.slider-value[data-id='+countslide+']' ).html( ui.value+'px' ),
                      $( '.arti-carousel-ui-slider[data-id='+countslide+'] input' ).val(ui.value+'px')
                  }
              }
          );
          $(this).find( '.slider-value[data-id='+countslide+']').html(  $('.arti-carousel-ui-slider-slidebar[data-id='+countslide+']').slider('value')+'px' );
      });
  });
  </code></pre>