Multiple jQuery UI sliders updating the wrong values <p>I'm using the Wordpress Meta Box plug-in (<a href="https://github.com/rilwis/meta-box" rel="nofollow">https://github.com/rilwis/meta-box</a>) to place six jQuery UI sliders on a post page.</p> <p>Problem is that there must be an error in the jQuery that handles the sliders I can't find: everytime I put multiple sliders, it updates the value of the last slider in the page instead of the correct one. Works fine only with 1 slider in the page, or If I repeat the code six times (once for each class), which obviously I don't wanna do.</p> <p>Example:</p> <p>I move <strong>pm_slider_c1</strong> > Updates <strong>pm_rating_c6-label</strong> span</p> <p>Here's the JS code:</p> <pre><code>jQuery( document ).ready( function( $ ) { var id = null , el = null , input = null , label = null , format = null , value = null , update = null ; $( '.rwmb-slider' ).each( function( i, val ) { id = $( val ).attr( 'id' ); el = $( '#' + id ); input = $( '[name=' + id + ']' ); label = $( '[for=' + id + ']' ); format = $( el ).attr( 'rel' ); $( label ).append( ': &lt;span id="' + id + '-label"&gt;&lt;/span&gt;' ); update = $( '#' + id + '-label' ); if ( !$( input ).val() || 'undefined' === $( input ).val() || null === typeof $( input ).val() ) { $( input ).val( $( el ).slider( "values", 0 ) ); $( update ).text( "0" ); } else { value = $( input ).val(); $( update ).text( value ); } if ( 0 &lt; format.length ) $( update ).append( ' ' + format ); el.slider( { value: value, slide: function( event, ui ) { $( input ).val( ui.value ); $( update ).text( ui.value + ' ' + format ); } } ); } ); } ); </code></pre> <p>HTML OF A SINGLE SLIDER: </p> <pre><code>&lt;div class="rwmb-field rwmb-slider-wrapper"&gt; &lt;div class="rwmb-label"&gt; &lt;label for="pm_rating_c1"&gt;Rating: &lt;span id="pm_rating_c1-label"&gt;0&lt;/span&gt;&lt;!-- GENERATED FROM JS --&gt; &lt;/label&gt; &lt;/div&gt; &lt;div class="rwmb-input"&gt; &lt;div class="clearfix"&gt; &lt;div class="rwmb-slider" id="pm_rating_c1"&gt;&lt;/div&gt; &lt;input type="hidden" name="pm_rating_c1" value="0"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>It's four days I'm having a headache on this (I'm no jQuery expert), so any help would be much appreciated.</p> <p>Thanks guys</p>