Hello to all, I'm a php person and I'm having a hard time with this jquery script:

The function of the script is to tag persons on a photograph just like in facebook, the only thing is that I don't know how to save this data to my sql database and then retrieve it, edit, delete...

any help?

full script below.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Creating Tags Demo</title>
 
<style type="text/css"> 
html, body { margin: 0px; padding: 0px; }
body
{
color: #666;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
padding: 20px;
}
 
#tag-wrapper
{
border: 1px solid #ccc;
box-shadow: 0px 0px 10px #bbb;
-webkit-box-shadow: 0px 0px 10px #bbb;
-moz-box-shadow: 0px 0px 10px #bbb;
display: block;
padding: 10px;
position: relative;
}
 
	#tag-target, #tag-wrapper img { cursor: crosshair; }
	
	#tag-wrapper img { position: absolute; }
	
	#tag-target
	{
	display: none;
	border: 4px solid #fff;
	box-shadow: 0px 0px 20px #000;
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	height: 100px;
	width: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	}
	
	#tag-input
	{
	background: #fff;
	display: none;
	padding: 5px;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 137px;
	z-index: 2;
	}
	
		#tag-input label
		{
		display: block;
		font-weight: bold;
		}
		
		#tag-input input
		{
		border: 1px solid #ccc;
		color: #888;
		display: block;
		margin: 5px 0px;
		outline: 0px;
		padding: 3px;
		width: 124px;
		}
	
	.hotspot
	{
	border-width: 0px;
	box-shadow: 0px 0px 0px #000;
	-webkit-box-shadow: 0px 0px 0px #000;
	-moz-box-shadow: 0px 0px 0px #000;
	height: 100px;
	width: 100px;
	position: absolute;
	}
	
		.hotspot:hover, .hotspothover
		{
		border: 4px solid #fff;
		box-shadow: 0px 0px 20px #000;
		-webkit-box-shadow: 0px 0px 20px #000;
		-moz-box-shadow: 0px 0px 20px #000;
		z-index: 1;
		}
		
		.hotspot span { display: none; }
		.hotspot:hover span, .hotspothover span
		{
		background: #fff;
		display: block;
		font-weight: bold;
		padding: 3px 0px;
		text-align: center;
		}
 
.remove { color: #748950; cursor: pointer; text-decoration: underline; }
</style>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
 
<script type="text/javascript"> 
//Placed outside .ready for scoping
var targetX, targetY;
var tagCounter = 0;
 
$(document).ready(function(){
	//Dynamically wrap image
	$("img").wrap('<div id="tag-wrapper"></div>');
	
	//Dynamically size wrapper div based on image dimensions
	$("#tag-wrapper").css({width: $("img").outerWidth(), height: $("img").outerHeight()});
	
	//Append #tag-target content and #tag-input content
	$("#tag-wrapper").append('<div id="tag-target"></div><div id="tag-input"><label for="tag-name">Person\'s Name:</label><input type="text" id="tag-name"><button type="submit">Submit</button><button type="reset">Cancel</button></div>');
	
	//$("#tag-wrapper").click(function(e){
	$("img").click(function(e){		
		//Determine area within element that mouse was clicked
		mouseX = e.pageX - $("#tag-wrapper").offset().left;
		mouseY = e.pageY - $("#tag-wrapper").offset().top;
		
		//Get height and width of #tag-target
		targetWidth = $("#tag-target").outerWidth();
		targetHeight = $("#tag-target").outerHeight();
		
		//Determine position for #tag-target
		targetX = mouseX-targetWidth/2;
		targetY = mouseY-targetHeight/2;
		
		//Determine position for #tag-input
		inputX = mouseX+targetWidth/2;
		inputY = mouseY-targetHeight/2;
		
		//Animate if second click, else position and fade in for first click
		if($("#tag-target").css("display")=="block")
		{
			$("#tag-target").animate({left: targetX, top: targetY}, 500);
			$("#tag-input").animate({left: inputX, top: inputY}, 500);
		} else {
			$("#tag-target").css({left: targetX, top: targetY}).fadeIn();
			$("#tag-input").css({left: inputX, top: inputY}).fadeIn();
		}
		
		//Give input focus
		$("#tag-name").focus();	
	});
	
	//If cancel button is clicked
	$('button[type="reset"]').click(function(){
		closeTagInput();
	});
	
	//If enter button is clicked within #tag-input
	$("#tag-name").keyup(function(e) {
		if(e.keyCode == 13) submitTag();
	});	
	
	//If submit button is clicked
	$('button[type="submit"]').click(function(){
		submitTag();
	});
 
}); //$(document).ready
 
function submitTag()
{
	tagValue = $("#tag-name").val();	
	
	//Adds a new list item below image. Also adds events inline since they are dynamically created after page load
	$("#tag-wrapper").after('<p id="hotspot-item-' + tagCounter + '">' + tagValue + ' <span class="remove" onclick="removeTag(' + tagCounter + ')" onmouseover="showTag(' + tagCounter + ')" onmouseout="hideTag(' + tagCounter + ')">(Remove)</span></p>');
	
	//Adds a new hotspot to image
	$("#tag-wrapper").append('<div id="hotspot-' + tagCounter + '" class="hotspot" style="left:' + targetX + 'px; top:' + targetY + 'px;"><span>' + tagValue + '</span></div>');
	
	tagCounter++;
	closeTagInput();
}
 
function closeTagInput()
{
	$("#tag-target").fadeOut();
	$("#tag-input").fadeOut();
	$("#tag-name").val("");
}
 
function removeTag(i)
{
	$("#hotspot-item-"+i).fadeOut();
	$("#hotspot-"+i).fadeOut();
}
 
function showTag(i)
{
	$("#hotspot-"+i).addClass("hotspothover");
}
 
function hideTag(i)
{
	$("#hotspot-"+i).removeClass("hotspothover");
}
</script>
</head>
 
<body>

<img src="example.jpg" style="width: 604px; height: 423px;">

</body>
</html>