How to clone and initialize jQuery Sliders with jQuery.each()

I'm trying to clone a jQuery range slider (maximum of 5 times) to retain the same name (to post as an array).

I've managed to get that working, but the first slider is the only one that will work. I've tried using $this:

$(".slider").each(function () {

        $this = $(this);

        $("#slider-range", $this).slider({
                range: true,
                min: 18,
                max: 100,
                values: [ 21, 30 ],
                slide: function( event, ui ) {
                    $( "#amount" ).val(ui.values[ 0 ] + " - " + ui.values[ 1 ] );
                }
            });
            $( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
                " - " + $( "#slider-range" ).slider( "values", 1 ) );
        });

If I inspect element after clicking the button to clone the last range slider I get:

<div id="entry1" class="clonedInput">
<div class="slider">
<p>
    <label for="amount">Age range:</label>
    <input id="amount" readonly="" name="amount" style="border:0; color:#f6931f; font-weight:bold;" type="text">
</p>

<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-range"><div style="left: 3.65854%; width: 10.9756%;" class="ui-slider-range ui-widget-header ui-corner-all"></div><span style="left: 3.65854%;" class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span><span style="left: 14.6341%;" class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span></div>
</div>

</div>

<div style="display: block;" id="entry2" class="clonedInput">
<div class="slider">
<p>
    <label for="amount">Age range:</label>
    <input id="amount" readonly="" name="amount" style="border:0; color:#f6931f; font-weight:bold;" type="text">
</p>

<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-range"><div style="left: 3.65854%; width: 10.9756%;" class="ui-slider-range ui-widget-header ui-corner-all"></div><span style="left: 3.65854%;" class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span><span style="left: 14.6341%;" class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span></div>
</div>

</div>

Solution

1) Use the one DOM id in one page;
2) If you want to use the repetition of classes;
3) Use .find() or .children() that find children element.

like this:

var $this = $(this);
var amount = $this.find(".amount");
var slider = $this.find(".slider-range")
   .slider({
    range: true,
        min: 18,
        max: 100,
        values: [21, 30],
        slide: function (event, ui) {
            amount.val(ui.values[0] + " - " + ui.values[1]);
        }
    });

amount
    .val(slider.slider("values", 0) 
        + " - " 
        + slider.slider("values", 1));
});

example