how to hide the previous row using ajax - php

Question

when i click first row of left table am getting output in right side. Same when i click second row of first table, second row output should only come but first row output ans second row output both are displaying first row output not getting hide.
Can you pls anyone help me out to solve this issue.
php code:
<?php
session_start();
include "db.php";
$query = "select * from purna_orders";
$result = mysql_query($query);
$num_rows = mysql_num_rows($result);
if($num_rows >= 1)
{
echo "<div id='showmenu' class='scroll'>";
echo "<table id='table_struct' cellspacing='0' cellpadding='1' border='1' width='400' height='30'>
<tr class='tr_class' bgcolor='white'>
<td align='center' style='font-weight:bold'> Select </td>
<td align='center' style='font-weight:bold'> order_id </td>
<td align='center' style='font-weight:bold'> customer_name </td>
<td align='center' style='font-weight:bold'> price </td>
<td align='center' style='font-weight:bold'> payment mode </td>
</tr>";
while($row = mysql_fetch_array($result))
{
$order_id = $row['order_id'];
$_SESSION['order_id'] = $order_id;
echo "<tr height='20' data-order_id='".$row['order_id']."'>
<td align='center'><input type='checkbox' class='case' name='case' value='1'></td>
<td align='center'>".$row['order_id']."</td>
<td align='center'>".$row['customer_name']."</td>
<td align='center'>".$row['order_value']."</td>
<td align='center'>".$row['bill_to_pincode']."</td>";
echo "</tr>";
}
echo "</table>";
echo "</div>";
}
if(!mysql_close($con))
{
echo "failed to close";
}
?>
Ajax Code:
<script type="text/javascript">
$('#table_struct tr').click(function() {
var $this = $(this);
var offset = $this.offset();
var height = $this.height();
var order_id = $this.data('order_id');
$.get('getuser.php?order_id=' + order_id, function(table) {
$('.menu').append(table);
$('.menu').css({
right: offset.right,
top: offset.top+height
});
});
});
</script>
getuser.php
<?php
include "db.php";
$order_id = intval($_GET['order_id']);
$sql="SELECT * FROM purna_order_items WHERE order_id = '".$order_id."'";
$result = mysql_query($sql);
echo "<div style=margin-top:-398px; margin-bottom:0px;'>";
echo "<table border='1' style='background-color:white; font-style:bold;'>
<tr>
<td align='center'><b>Increment Id</b></td>
<td align='center'><b>Po Order Id</b></td>
<td align='center'><b>Item Sku</b></td>
<td align='center'><b>Item Name</b></td>
<td align='center'><b>Item Price</b></td>
<td align='center'><b>Item Quantity</b></td>
<td align='center'><b>Item Weight</b></td>
</tr>";
while($row = mysql_fetch_array($result)) {
echo "<tr>";
echo "<td align='center'>" . $row['order_id'] . "</td>";
echo "<td align='center'>" . $row['po_id'] . "</td>";
echo "<td align='center'>" . $row['sku'] . "</td>";
echo "<td align='center'>" . $row['item_name'] . "</td>";
echo "<td align='center'>" . $row['item_price'] . "</td>";
echo "<td align='center'>" . $row['item_qunatity'] . "</td>";
echo "<td align='center'>" . $row['weight'] . "</td>";
echo "</tr>";
}
echo "</table>";
echo "</div>";
mysql_close($con);
?>
output screenshot:

Answer 1

Your code does not have sufficient information, but try with this one, if it helps -
<script type="text/javascript">
$('#table_struct tr').click(function() {
var $this = $(this);
var offset = $this.offset();
var height = $this.height();
var order_id = $this.data('order_id');
$.get('getuser.php?order_id=' + order_id, function(table) {
$('.menu', $this).append(table);
$('.menu', $this).css({
right: offset.right,
top: offset.top+height
});
});
});
</script>