hi.actually i have two tables category and subcategory.data inserting to the respective category everything is working fine but i am facing trouble while retriving it.I want my flow to be like this..

Category1
categoory1.1
category1.2

Category2
category2.1
category2.2

i mean i wann to display all the subcategories once i click on the category.As Onclick is a JS event so i used AJAX to retrieve the data in the next page.i am gettng the proper data but its not showing below the correct category.please help me how can i achieve this drop down mechanism.here is my code:

<html>
<head>
<style type="text/css">
.style5{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}

</style>
<script type="text/javascript">
var xmlHttp;
function callAjax(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) {
alert ("Browser does not support HTTP Request")
return
}
var url="newajpro.php"
url=url+"?category_id="+str

xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}


function stateChanged(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtid").innerHTML=xmlHttp.responseText
}
}

function GetXmlHttpObject() {
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}


</script>
</head>
</html>
<?php
include("connection.php");
$q="select * from category";
$r=mysql_query($q);
$row=mysql_fetch_object($r);
while($row!=NULL)
{
$id=$row->category_id;
$name=$row->caty_name;
?>

<table border="0">
<tr >
<?php /*?> <td><a href="newcatrgory.php?category_id=<?php echo $id?>"><?php echo $name;?></a>
<?php */?>
<td>
<td class="style5">
<span id="txtid">
<img src="images/14.jpeg" width="25" height="33" onclick="callAjax(this.value);" value=<?php echo $id;?> /><?php echo $name;?>
</span></td>
</td>
<?php
include("connection.php");
$q="select * from category";
$r=mysql_query($q);
$row=mysql_fetch_object($r);
while($row!=NULL)
{
$id=$row->category_id;
$name=$row->caty_name;
?>

<table border="0">
<tr >


<td>
<td class="style5">
<span id="txtid">
<img src="images/14.jpeg" width="25" height="33" onclick="callAjax(this.value);" value=<?php echo $id;?> /><?php echo $name;?>
</span></td>
</td>
<?php
$row=mysql_fetch_object($r);

}
?>


this is next paghe code:newajpro


<?php
include("connection.php");
$id1=$_REQUEST['category_id'];
$q1="select * from subcategory s,product p where s.category_id=$id1 and p.procat=$id1";
$r1=mysql_query($q1);
$row1=mysql_fetch_object($r1);
while($row1!=NULL)
{
$id2=$row1->sub_catid;
$name2=$row1->sub_catname;
$name3=$row1->proname;
$id3=$row1->productid;
?>

?>

<table id=<?php $id1;?>>
<tr>

<td class="style5">
<?php echo $name2;?></td></tr>
<tr>
<td><a href="newcatrgory2.php?productid=<?php echo $id3;?>"><?php echo $name3;?></a></td>
</tr>

<?php
$row1=mysql_fetch_object($r1);

}
?>
</table>

please help me how can i display below the respective category