เมื่อ Onclick ที่รูปภาพ แล้วให้ส่งค่า Row Index ไปยัง Javascript ได้ยังไงคะ

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="box">
<?php
	$catid = "1";
	$con = mysql_connect('localhost', 'xxxx', 'xxxxxx') ;
	if(!$con){
		die("cannot connect db: ".mysql_error());
	}
	mysql_select_db("dbname",$con);
	mysql_query("SET NAMES utf8",$con);
	
	$result = mysql_query("select * from product where pcategory ='$catid'") ;
	$pcatid = array();
	while($record = mysql_fetch_array($result) )
	{
		array_push($pcatid,$record);
	}

	foreach($pcatid as $key => $value){
	?>
		<div class="col-xs-6 col-md-3" id="mypic">	
			<p id='<?php echo $key;?>' > click show id</p>
		</div>

	<?php
	}

?>

</div>

 
<script>
$( "#box #mypic p" ).click(function() {
 	var id = $(this).attr("id");
 	alert(id);
});
</script>