重复jQuery脚本

Question

$("#like_answer_button").removeAttr("disabled");
$('#like_answer_button').click(function(e)
    {
        var id = $(this).closest('.box').data('id');
        var url = "https://www.sdkwf.de/jquery/good_answer.php?answer_user=" + id;          
        var val = parseInt($("#like_answer_button").val(), 10);
        $.post(url,{op:"<?php echo $ask; ?>"},function(data)
        {
            $("#status").html("");
            val = val+1;
            $("#like_answer_button").val(val);
            $("#like_answer_button").attr("disabled", "disabled");
            $("#like_answer_button").css("background-image","url(https://www.sdkwf.de/img/icon.png)");
        })
    });

Any idea how I can make this script work if repeated in PHP (while) for many different buttons with this code?

<div class="box" data-id="'.$id.'">
<input type="submit" class="like" name="like_answer_button" value="10" id="like_answer_button" />

It only works for the first button/input, but the other ones do not work. I guess because like_answer_button is reserved for first one?

Answer 1

HTML - don't repeat the same id for inputs. ensure names and ids are unique if you need them.

<div class="box" data-id="'.$id.'">
<input type="submit" class="like" value="10" />

<div class="box" data-id="'.$id.'">
<input type="submit" class="like" value="11" />

<div class="box" data-id="'.$id.'">
<input type="submit" class="like" value="12" />

JS - Use a class selector instead of a specific element id in your javascript

$('.like').click(function(e)
{
    var id = $(this).closest('.box').data('id');
    var url = "https://www.sdkwf.de/jquery/good_answer.php?answer_user=" + id;          
    var val = parseInt($(this).val(), 10);
    $.post(url,{op:"<?php echo $ask; ?>"},function(data)
    {
        $("#status").html("");
        val = val+1;
        $(this).val(val);
        $(this).attr("disabled", "disabled");
        $(this).css("background-image","url(https://www.sdkwf.de/img/icon.png)");
    })
});