图像无效的简单评分滑块

Question

I am trying to setup a simple image scoring system on a site, you click on a thumbnail, a modal box with image opens containing a jquery slider, move it to rate the image and it writes the value back to mysql. Problem is I cannot get it to save the value for the correct image, it always writes back the score value to the last entry in the table. Can someone help. Thanks in advance.

<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

I have it working perfectly now. I changed the code around a fair bit.

    <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>