使用动态数据jquery多次加载UI滑块

我想在我的页面中使用这个jquery滑块。我想在页面上多次加载滑块。这对我不起作用。这是我的代码。

    <script>
    jQuery(function() {
<?php 
    for( $i =0; $i<3;$j++){ 
    ?>  
        jQuery( "#slider-range-max+<?php echo $i?>" ).slider({
        range: "max",
        min: 1,
        max: 10,
        value: 2,
        slide: function( event, ui ) {
        jQuery( "#amount+<?php echo $i?>" ).val( ui.value );
    }
});
    jQuery( "#amount+<?php echo $i?>" ).val( jQuery( "#slider-range-max+<?php echo $i?>" ).slider( "value" ) );
<?php } ?>
});
</script>
<?php 
for( $j =0; $j<3;$j++){  ?>
<p>
     <label for="amount<?php echo $i?>">Minimum number of bedrooms:</label>
    <input type="text" id="amount<?php echo $i?>" style="border: 0; color: #f6931f; font-weight: bold;" />
    </p>
<div id="slider-range-max<?php echo $i?>"></div>
<?php  } ?>

这是上述代码的输出

<script>
jQuery(function() {
jQuery( "#slider-range-max0" ).slider({
range: "max",
min: 1,
max: 10,
value: 2,
slide: function( event, ui ) {
jQuery( "#amount0" ).val( ui.value );
}
});
jQuery( "#amount0" ).val( jQuery( "#slider-range-max0" ).slider( "value" ) );
jQuery( "#slider-range-max1" ).slider({
range: "max",
min: 1,
max: 10,
value: 2,
slide: function( event, ui ) {
jQuery( "#amount1" ).val( ui.value );
}
});
jQuery( "#amount1" ).val( jQuery( "#slider-range-max1" ).slider( "value" ) );
jQuery( "#slider-range-max2" ).slider({
range: "max",
min: 1,
max: 10,
value: 2,
slide: function( event, ui ) {
jQuery( "#amount2" ).val( ui.value );
}
});
jQuery( "#amount2" ).val( jQuery( "#slider-range-max2" ).slider( "value" ) );
});
</script>
<p>
 <label for="amount3">Minimum number of bedrooms:</label>
<input type="text" id="amount3" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-max3"></div>
<p>
 <label for="amount3">Minimum number of bedrooms:</label>
<input type="text" id="amount3" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-max3"></div>
<p>
 <label for="amount3">Minimum number of bedrooms:</label>
<input type="text" id="amount3" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-max3"></div>