Multiple Classes with same ID

[dwatson251]

Here's my site: http://dabrix.zxq.net/

I want it so when you click the pencil icon (Whilst logged in) a text area shows up instead of the content, and clicking submit when changing the information, we update the DB.

To display each block I'm running a while loop in PHP so each block uses the same class, but for Jquery I need to somehow identify each block so I can link the pencil button thing to each block.

At the moment I'm using the :eq() suffix at the end of the selector to do so, but it seems the more I press the edit icon in the first block, the other blocks get edited and I'm not sure what the problem is.

$(document).ready(function() {
	var blockdata = $('.blockdata:eq(0)').html();
	$(".edit:eq(0)").click(function() {
		$(".updateblock:eq(0)").show();
		$(".blockdata:eq(0)").hide();
		$("form.updateblock:eq(0)").submit(function() { 
			var newblockdata = $('.newblockdata:eq(0)').attr('value'); 
			var newblockcolor = $('.newblockcolor:eq(0)').attr('value');
			$.ajax({  
				type: "POST",  
				url: "edit.php",  
				data: "block=" + newblockdata + "& color=" + newblockcolor,  
				success: function(){ 
					alert("Success");
					$('.blockdata:eq(0)').replaceWith(newblockdata);
					$('.block:eq(0)').css("background-color", newblockcolor);
					$(".updateblock:eq(0)").hide();
					$(".blockdata:eq(0)").show();
				}  
			});  
		return false;  
		}); 
	});				
});