Issue Grabing ID from form in a while loop using JQuery/AJax

[piehead]

I am having such a hard time with this.. 3 days stuck on something Im sure you the experts would laugh at.... so any help would be wonderful.

I have a php loop that loads a form for each row in a table. I want to approve a record and save it to a table. Problem is I cant seem to pull the unique ID of the form, it always adds the last row in the table.. I have tried $(this).attr("id"), $(this).form("id") and no dice. Please help a tired novice lol

The Form Loop (php)

while($row = mysql_fetch_array($pendingresult))
 
  { 
 $id = "myForm".$row['reg_id'];
 echo '<table width="100%" border="0" cellspacing="0" cellpadding="0" >';
  print "<form id=\"$id\" name=\"CDs\" method=\"post\" >";
  
    echo '<tr class="commentContainer" style="color:#FFF">';
    echo"<td><input type=\"text\" name=\"team_name\" value=\"$row[team_name]\"</td>";
	
    echo"<td><input type=\"text\" name=\"reg_id\" value=\"$id\"</td>";
    echo"<td><input type=\"text\" name=\"team_level\" value=\"$row[team_level]\"</td>";
    echo"<td><input type=\"text\" name=\"notes\" value=\"$row[comments]\"</td>";
   
    echo"<td>";
	
	 
   	
	echo "<td class=\"delete\" align=\"center\" id=".$row['reg_id']." width=\"10\"><a href=\"#\" id=\"$row[reg_id]\"><img src=\"admin/images/delete.png\" border=\"0\" ></a></td>";
    echo "<td class=\"approve\" align=\"center\" id=".$id." width=\"10\"><a href=\"#\" ><img src=\"admin/images/approve.png\" border=\"0\" ></a></td>";
	
	echo "</td>";
	
  echo"</tr>";
  echo "</form>";
  echo ' </table>';
    
 
  }

The AJAX

<!---  Pending DB Approve Request----->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

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

$(function() {
$(".approve").click(function() {
<!--$('#load').fadeIn();-->
var commentContainer = $(this).parent('tr:first');
var id = $(this).attr("id");
var string = 'id='+ id;
var formData = $(this).attr("id")

$.ajax({
   type: "POST",
   url: "approve.php",
   data: $(formData).serialize(),
   
   cache: false,
   success: function(){
	commentContainer.slideUp('slow', function() {$(this).remove();});
	
  }
   
 });

return false;
	});
});
</script>

[devnull69]

id means "identity". What would you think if someone told you that you share your identity with others? You'd say: "No way, my identity is unique". And the same is true also for Javascript.

Bottom line: You should not use the same id attribute value on more than one element on the same page.

Workaround: Prepend a unique String to the numeric identifier, like "article_101" and "cell_101". Then you can extract the numeric part using

var numID = Number($(this).attr('id').match(/(\d+)/)[1]);

[piehead]

Each form has a unique ID... $id = "myForm".$row['reg_id'];

thanks ok right?