Простой скользящий слайдер для изображений, не работающих

Question

Я пытаюсь настроить простую систему оценки изображений на сайте, вы нажимаете на миниатюру, модальный ящик с открытием изображения, содержащий ползунок jquery, переместите его, чтобы оценить изображение, и он пишет значение возвращается к mysql. Проблема в том, что я не могу заставить его сохранить значение для правильного изображения, он всегда записывает значение оценки в последнюю запись в таблице. Может кто-то помочь. Заранее спасибо.

<div id="<?php echo $id; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
<p><h3 id="myModalLabel"><?php echo $image_title ?></h3></p> 
</div> 
<div class="modal-body"> 
<img src="<?php echo $image_name ?>"> 
<h4>Photo description:</h4> 
<p><?php echo $image_information ?></p> 
<h4>Photographer: <?php echo $photographer_name ?></h4> 

<h4 for="amount">Score:</h4> 
<input type="text" id="amount" readonly style="color:#462a74; width:16px; font-weight:bold;"> 
<div id="slider"></div> 

</div> 

<div class="modal-footer"> 
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
</div> 
</div> 

<script> 
$(document).ready(function() {  
$("#amount").val(<?php echo $score; ?>); 
$("#slider").slider({ 
range: "max", 
min: 1, 
max: 100, 
value: <?php echo $score; ?>, 
slide: function(event, ui) { 
$("#amount").val(ui.value); 
} 
}); 

$("#slider").mouseup(function(){ 
var id = '<? echo $id ?>'; 
    var amount = (document.getElementById('amount').value); 
$.post("update_score.php", { amount: amount, id:id }); 
}); 
</script> 


update_score.php 

$id = $_POST['id']; 
$score = $_POST['amount']; 

$result = $sql->query("UPDATE images SET score = '$score' WHERE id = '$id'"); 

Answer 1

У меня он работает отлично сейчас. Я изменил код вокруг честного.

<p><input type="text" id="amount_<? echo $id ?>" class="amount" data slider="true" data-slider-theme="volume" data-slider-range="0,100" data-slider-step="1" value="<?php echo $score ?>"></p> 

    <script> 
    $("[data-slider]") 
    .each(function() { 
     var input = $(this); 
     $("<span>") 
     .addClass("output") 
     .insertAfter($(this)); 
    }) 
    .bind("slider:ready slider:changed", function (event, data) { 
     $(this) 
     .nextAll(".output:first") 
      .html(data.value.toFixed(3)); 
    }); 
    </script> 

    <script> 
    var id = '<?php echo $id; ?>'; 
    $(".amount").bind("slider:changed", function (event, data) { 
    id = $(this).attr("id"); 
    $.post("update_score.php", { amount: data.value, id:id }); 
    }); 
    </script> 

    <script> 
    var id = '<?php echo $id; ?>'; 
    $(".comments").bind('keyup paste', function(e) { 
     id = $(this).attr("id"); 
     $.post("update_comments.php", { comments:e.target.value, id:id } ); 
    }); 
    </script>