麻烦制作一个独特的按钮

I have a situation in which I use this java script for a single button and it works like this:

<script type="text/javascript">
$(document).ready(function(){

    $(document).on('click','a.btn-success',function(e){
        e.preventDefault();
        var myProductID=$(this).data('productid');
        var myUserid=$(this).data('iam');
        var postData={productID:myProductID,userid:myUserid};

        $.ajax({
            url: this.href,
            type:"POST",
            data: postData,
            success: function(data, textStatus, jqXHR){                
                $('a.btn-success').remove();
                $('a.btn-success').remove();
                $('#ajax-response').html('<p><button type="button" class="btn btn-info btn-xs btn-block">Added</button></p>');
            }
        });
    });
});
</script> 

And my link:

                    <!-- Add to cart button -->
                    <p><a class="btn btn-success btn-xs btn-block" data-productid="<?php echo $current_product->product_id; ?>" data-userid="<?php echo $userID; ?>" href="../incl/ajax-add-to-cart.php">Add</a></p>
                    <p id="ajax-response"></p>

And this works!!

What I now want is to use it with a list of products in which each product has besides its picture a button "add" which is represented by:

 a.btn-success

What I am doing is something like this:

              <!-- Add to cart button -->
                    <?php echo "<p><a class='btn btn-success'$button_id' btn-xs btn-block' data-productid=' $current_product->product_id;' data-userid='$userID' href='../incl/ajax-add-to-cart.php'>Add</a></p>"?>
                    <p id="ajax-response"></p>

Notice that I am trying to append a variable "$button_id" to the name of the button (it is really an an a tag with the style of a bootstrap button).

Then in the JavaScript I do as follows:

<script type="text/javascript">
$(document).ready(function(){

    $(document).on('click','a.btn-success'.$button_id,function(e){ //added button id
        e.preventDefault();
        var myBookID=$(this).data('bookid');
        var myUserid=$(this).data('iam');
        var postData={bookID:myBookID,userid:myUserid};

        $.ajax({
            url: this.href,
            type:"POST",
            data: postData,
            success: function(data, textStatus, jqXHR){                
                $('a.btn-success'.$button_id).remove();//added button id
                $('a.btn-success'.$button_id).remove();//added button id
                $('#ajax-response').html('<p><button type="button" class="btn btn-info btn-xs btn-block">Tillägt</button></p>');
            }
        });
    });
});
</script>

But it does not work. Can anybody help?

Thank you

You should probably change your function into:

<script type="text/javascript">
$(document).ready(function(){
    var button_id = '<?php echo $button_id; ?>';
    $(document).on('click','a.btn-success'+button_id,function(e){ //added button id
        e.preventDefault();
        var myBookID=$(this).data('bookid');
        var myUserid=$(this).data('iam');
        var postData={bookID:myBookID,userid:myUserid};

        $.ajax({
            url: this.href,
            type:"POST",
            data: postData,
            success: function(data, textStatus, jqXHR){                
                $('a.btn-success'+button_id).remove();//added button id
                $('a.btn-success'+button_id).remove();//added button id
                $('#ajax-response').html('<p><button type="button" class="btn btn-info btn-xs btn-block">Tillägt</button></p>');
            }
        });
    });
});
</script>

I assume this JavaScript file is inside PHP file where you can put $button_id value into JavaScript variable using simple <?php echo $button_id; ?>

try this:
check your button using firebug tool,i think it is not unique.

<?php echo "<p><a class='btn btn-success".$button_id." btn-xs btn-block' data-productid='".$current_product->product_id."' data-userid='".$userID."' href='../incl/ajax-add-to-cart.php'>Add</a></p>"?>

and also change $button_id to <?php echo $button_id;?> in your js.

You actually don't need to make your btn unique to make this work ( especially when it's not by your logic).

I would go for it with the following changes:

use $(e.target) instead of $(this) For ajax response - In the html you may transform it from

<p id="ajax_response" ></p>

to

<p class="ajax_response" id="ajax_response_<?php echo $prod_id; ?>" ></p>

Or you may rearrange the html a bit to make them part of the same logical parent and then use jquery functions like .closest() //searches up parents and .find() finds in children

$(document).on('click','a.btn-success',function(e){    
e.preventDefault();
var $btn = $(e.target); // you may console.log( $btn ); here if you wish so

var myProductID= $btn.data('productid'); // all references to $(this) are replaced by $btn
var myUserid=$btn.data('iam');
var postData={productID:myProductID,userid:myUserid};

$.ajax({
    url: $(btn).href,
    type:"POST",
    data: postData,
    success: function(data, textStatus, jqXHR){                
        var $ajaxResponseDiv = $('#ajax_response_'+myProductID);
        $btn.remove();
        $ajaxResponseDiv.html('<p><button type="button" class="btn btn-info btn-xs btn-block">Added</button></p>');
    }
});
});

Best regards