.post

.post

I am using the ajax call .post to update content on my page when a user clicks a certain option. My javascript looks like this:

<script type="text/javascript">
    <!--
$(document).ready(function () {
   $.post("portfolio-ajax.php", function(data){
      $("#mainContent").html(data);
   });
   $(".button").click(function () {
      $("#mainContent").fadeOut("fast");
      var pid = $(this).attr("id");
      alert(pid);
      $.post("portfolio-ajax.php", {portid:pid},
        function(data){
          $("#mainContent").html(data);
         $("#mainContent").fadeIn("slow");
        });
   });      
});
//-->
</script>


and my php that is called looks like this:

<?php
include('db/connect.php');
mysql_select_db($database_database, $linkID);

if(!isset($_POST['portid'])) {
   $pid = 1;
} else {
   $pid = $_POST['portid'];
}
echo $pid;
$sql = "SELECT * FROM portfolio WHERE portID = '$pid'";

$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {   
   echo "<img class='trigger' src='images/" . $row['image'] . "' id='download' /><br /><b>Site:</b> " . $row['sitename'] . "<br /><b>Technology Used:</b> " . $row['techs'] . "<br /><a style='color:#FFFFFF;' title='" . $row['sitename'] . "' href='" . $row['sitelink'] . "'>Visit Site</a>";
}
?>


My only problem is, there is two records in my database and are called my the id. Now when I run it, it loads the content with the row with the id of 1. When I click on the button on the page to load the second record, it still gives me the 1st. No matter what I do it only gives me the first record. when using alert(pid); it alerts the right id of 2 but still returns the first record. Any ideas?