jquery - add slider functionality to objects that are created dynamically
<p>I'm using the .clone() method to create copies of a collection of nested elements every time a user presses a button.</p>

<p>However, within each group of elements I need a slider that will attach to the slide functionality but which should only change the value of items within that particular collection.</p>

<p>How do I create a new instance of the slider for each collection created.</p>

<p>The below code works for a hard-coded slider with the id of "value-slider" but I need the below code to work for each instance of the cloned slider.</p>

<p>Thanks for your help</p>

<pre><code>$(function() {
    $( "#value-slider" ).slider({
        orientation: "horizontal",             
        value:100,
        min: 0,
        max: 1000,
        step: 50,
        slide: function( event, ui ) {
            alert($(this).attr("id"));
            $( ".amount" ).val( "£" + ui.value + " - £" + (ui.value + 100) );
            $( ".price" ).text( "£" + (ui.value / 19).toFixed(2)  );
            $( ".i-price" ).text( "£" + (ui.value / 19).toFixed(2)  );
        }
    });
    $( ".amount" ).val( "£" + $( ".value-slider" ).slider( "value" ) + " - £" + ($( ".value-slider" ).slider( "value" ) + 100) );
});
</code></pre>

<p>The markup of the element that is to be cloned is below (notice how the slide is just a descendant of the cloned element :</p>

<pre><code>&lt;div id="template" class="basket-item group hide" style="display:none;"&gt;
  &lt;div class="basket-item-icon"&gt;&lt;img /&gt;&lt;/div&gt;
  &lt;div class="basket-item-details"&gt; &lt;/div&gt;
  &lt;div class="basket-item-slider"&gt;
    &lt;div style="width:20px; font-weight:bold; float:left;color:#F6931F; "&gt;£0&lt;/div&gt;
    &lt;div class="value-slider" style="width:140px; float:left; margin-right:10px;"&gt;&lt;/div&gt;
    &lt;div style="width:30px; font-weight:bold; float:left;color:#F6931F; "&gt;£1000&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="basket-item-value"&gt;Value:
    &lt;input type="text" class="amount" style="margin:2px 0; color:#f6931f; font-weight:bold; width:90px;" /&gt;
  &lt;/div&gt;
  &lt;div class="basket-item-cover-price"&gt;Our Price:&lt;br /&gt;
    &lt;span class="i-price" style="font-size:24px; color:#F6931F;"&gt;£x.xx&lt;/span&gt; &lt;/div&gt;
&lt;/div&gt;
</code></pre>
