My thought is it has something to do with not having a unique "id" for each <a> tag??? I successfully created a unique id for each <a>, but still the same problem.
I know showing the code is the ideal way to solve most problems, but I think the amount of code I need to show might make this post even more long-winded. Here's the jQuery portion...
//Add item to myList
$(document).ready(function() {
// click mylist image to add item to myList
$('#a2ml').click(function(e) {
// post product number to store in mylist table
var ProductNumber = $('#ProductNumber').val();
$.ajax({
url: 'mylist_add_item.php',
type: 'POST',
data: 'ProductNumber=' + ProductNumber,
success: function(result) {
// create <div> and insert echo result from mylist_add_item.php
// display pop-up message to indicate item was added to mylist or if it already exists in mylist
$('<div id="a2mlResponse">' + result + '</div>').appendTo('body');
// get height of pop-up div (set in style.css)
var height = $('#a2mlResponse').height();
var width = $('#a2mlResponse').width();
// calc offset for displaying message
leftVal = e.pageX + 10 + 'px';
topVal = e.pageY - 50 + 'px';
// show popup and hide with fade
$('#a2mlResponse').css ({left:leftVal, top:topVal}).show().animate({opacity: 1.0}, 3000).fadeOut(1000);
}
});
return false;
});
});
Any thoughts/suggestions would be appreciated.