div not inserting correctly problem jquery - php

Question

I seem to be having a problem inserting a <div> element in the correct area. I want to push a button, in this case "more info" and display more information under the first div area using jquery.
example:
<div id="Main-info">
<div id="more-info">
</div>
</div>
The problem I'm having is the "Main-info" area is calling a php script and grabbing info from the database and displaying it in a table. The second php file I have loads in the "more-info" div so when I push the more info button the second php files goes under the entire first div but i want it to go under the specific information that I click.
A better example of what I am trying to accomplish is like the wefollow.com site, where you push the more info button and more info display right under the info you click. In my case the additional info goes under the entire table at the buttom.
Here is the code:
index.php:
<?php
include("buy.functions.php");
?>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="listing.js"></script>
<div id="article-area">
<h1>Welcome</h1>
<div id="output-listings">
<div id="more-information">
</div>
<?php outputListingsTable(); ?>
</div><!--end output-listings-->
buy.functions.php:
<?php
function outputListingsTable()
{
$mysql = new mysqli('localhost', 'root', 'root', 'ajax_demo') or die('you\'re dead');
$result = $mysql->query("SELECT * FROM explore") or die($mysql->error);
if($result)
{
echo "<table> \n";
while($row = $result->fetch_object())
{
$id = $row->id;
$siteName = $row->site_name;
$siteDescription = $row->site_description;
$siteURL = $row->site_url;
$sitePrice = $row->site_price;
echo "<div id=\"" . $id . "\"> \n";
echo " <tr> \n";
echo " <td>" . $siteName . "</td> \n";
echo " <td>" . $siteURL . "</td> \n";
echo " <td><a id=\"" . $id . "\" class=\"more-info\" href=\"#\">More info</a></td> \n";
echo " </tr> \n";
echo "</div> \n";
}
echo "</table> \n";
}
}
?>
getinfo.php:
<?php
function outputDescriptionTable($id)
{
$mysql = new mysqli('localhost', 'root', 'root', 'ajax_demo') or die('you\'re dead');
$result = $mysql->query("SELECT * FROM explore WHERE id=" . $id) or die($mysql->error);
if($result)
{
echo "<table> \n";
while($row = $result->fetch_object())
{
$siteName = $row->site_name;
$siteDescription = $row->site_description;
$siteURL = $row->site_url;
$sitePrice = $row->site_price;
echo "<div id=\"more-information\"> \n";
echo " <tr> \n";
echo " <td>" . $siteDescription . "</td> \n";
echo " <td>" . $sitePrice . "</td> \n";
echo " </tr> \n";
echo "</div> \n";
}
echo "</table> \n";
}
}
?>
<?php $id = $_GET['id']; ?>
<?php outputDescriptionTable("$id"); ?>
listing.js:
$(function(){
$("tr").hover(function(){
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
$('.more-info').click(function() {
$('#more-information').show().load('getinfo.php?id=' + $(this).attr('id'));
return false;
});
});

Answer 1

jQuery's closest should solve your problem. Something like:
$('.more-info').click(function(e) {
$(e.target).closest('.more-information').show().load('getinfo.php?id=' + $(this).attr('id'));
return false;
});
From the doc:
Closest works by first looking at the
current element to see if it matches
the specified expression, if so it
just returns the element itself. If it
doesn't match then it will continue to
traverse up the document, parent by
parent, until an element is found that
matches the specified expression. If
no matching element is found then none
will be returned.
Also, your 'more-information' divs should have the class more-information, as opposed to the ID, as IDs should be unique, else strange things might happen.