Question

I have a PHP script which is generating buttons to each content schedule. The script echo’s 1 HTML button with the same name, class and ID, however the value’s are set based on a variable.

In jQuery I have declared the button based on it’s class, so something like

$('.save').button();

However when I click a button, it always returns the value of the first button “1”, even if I click the 3rd button or 20th button.

jQuery

$('.save').unbind().click(function() {      
    $.post('create.php', {'val' : $('.save').val()}, function(data){    
       alert($('.save').val()); // Always alerts "1" regardless of button pressed.     
       });
});

PHP

$ctr = 1;
foreach($GLOBALS['conflict_schedule'] as $key => $value) {
    $html = '

    <div style="float:right;">
    <button class="save" name="save" value="' . $ctr . '" id="save">Save</button>
    </div>

    echo $html;
    $ctr++;
}

Answer 1

Instead of re-selecting the $('.save')-element, simply use $(this) which refers to the element being clicked:

$('.save').unbind().click(function() {
    var clicked = $(this);

    $.post('create.php', {'val' : clicked.val()}, function(data){
        alert(clicked.val());
    });
});