How to create a tree table using AJAX that load 1 level at a time?

Question

How to create a tree table using AJAX that load 1 level at a time?

I still can't make it expected. My data is from a mysql database with 8 hierarchy levels and thousands of records.

I answered the question of bcoughlan : How to create a collapsed tree table in html / css / js? and use the data from my database.

It works very well, but:

It took a very long time to load the table at the beginning, since my AJAX was still looping all the data from the database at the beginning (I have no knowledge about this, only for copying and trial version).
I can make the tree fade for the first time using style = "display: none;" but when I click on any of the nodes from level 1, it expands all levels below the node (from level 2 to level 8) instead of expanding only level 2.

I still cannot figure out how to make an AJAX script for the above problems 2, to make the page load time shorter at the beginning of the page.

CONTINUED UPDATES:

Now I can get AJAX to work for level 2.

Still trying, although I have no idea how to bring it up to level 3 to level 8. :)

Now my script is executed when trying level 3:

main.php

<html>
<head>
    <style type="text/css">
        .name               {   color: #000000;         }
        .folderclose        {   height: 16px;
                                width: 16px;
                                display: inline-block;  }
        .area .last         {   background-image: url(02_files/01_images/paper_small.png);          }
        .folderclose        {   background-image: url(02_files/01_images/folder_green.png);         }
        .expand .tog        {   background-image: url(02_files/01_images/folder_green_open.png);    }
    </style>
    <script type="text/javascript" src="jquery-2.1.4.js"></script>
</head>
<body>
    <form>
    <table>
        <tr><th>No</th>
            <th>Area & Plant</th>
            <th>Location</th>
            <th>Main Group</th>
            <th>Sub Group</th>
            <th>Function Group</th>
            <th>Functional Location</th>
            <th>Equipment</th>
        </tr>
<?  mysql_connect("localhost","root","");
    mysql_select_db("sfer");
    $areaid = 1;
    $sql = mysql_query("SELECT DISTINCT(Business_Area) FROM b01_functional_location");
    while($data=mysql_fetch_array($sql)){?>
        <tr id="area">
            <td align='center' class="id"><?=$areaid?></td>
            <td align='left' width='400'>   <a class="folderclose"></a>
                                            <a title='<?=$areaid.'. '.$data['Business_Area']?>' href="javascript:void(0)" class="name"><?=$data['Business_Area']?></a></td></tr>
        <tr id="plant<?=$areaid?>"></tr><?
        $areaid++; }

if (!empty($_POST['area'])){
    $plantid = 1;
    $sql = mysql_query("SELECT DISTINCT(Plant) FROM b01_functional_location WHERE Business_Area='$_POST[area]'");
    while($data=mysql_fetch_array($sql)){?>
        <tr id="plant">
            <td align='center' class="id"><?=$plantid?></td>
            <td align='left' width='400'>   <a class="folderclose"></a>
                                            <a title='<?=$plantid.'. '.$data['Plant']?>' href="javascript:void(0)" class="name"><?=$data['Plant']?></a></td></tr>
        <tr id="location<?=$plantid?>"></tr><?
        $plantid++; }}?>

        </table>
    </form>
</body>
<script type="text/javascript">
$('document').ready(function(){
    $('#area .name').click(function() {
        var area = $(this).text();
        var areaid = $(this).parent().parent().find('.id').text();
        $('#plant'+areaid).html('<img src="02_files/01_images/loading.gif">');
        $.ajax({
            type:   'POST',
            url:    'Action.php',
            data:   'area='+area+'&areaid='+areaid,
            success: function(data){
                $('#plant'+areaid).html(data).toggle();
            }
        });
    });
    $('#plant .name').click(function() {
        var plant = $(this).text();
        var plantid = $(this).parent().parent().find('.id').text();
        $('#location'+plantid).html('<img src="02_files/01_images/loading.gif">');
        $.ajax({
            type:   'POST',
            url:    'Action.php',
            data:   'plant='+plant+'&plantid='+plantid,
            success: function(data){
                $('#location'+plantid).html(data);
            }
        });
    });
});
</script>

action.php

<?php
mysql_connect("localhost","root","");
mysql_select_db("sfer");

if (!empty($_POST['area'])){
$plantid = 1;
$sql = mysql_query("select DISTINCT(Plant), Plant_Description from b01_functional_location where Business_Area='$_POST[area]'");
    while($data=mysql_fetch_array($sql)){?>
        <tr id="plant">
            <td align='center' class="id"><?=$plantid?></td>
            <td align='left' width='400'>   <a class="folderclose"></a>
                                            <a title='<?=$plantid.'. '.$data['Plant']?>' href="javascript:void(0)" class="name"><?=$data['Plant']?></a></td>
            <td align='left'><?=$data['Plant_Description']?></td>
        </tr><? $plantid++;}    }

if (!empty($_POST['plant'])){
$locationid = 1;
$sql = mysql_query("select DISTINCT(Location), Location_Desc from b01_functional_location where Plant='$_POST[plant]'");
    while($data=mysql_fetch_array($sql)){?>
        <tr id='location'>
            <td align='center' class="id"><?=$locationid?></td>
            <td align='left' width='400'>   <a class="folderclose"></a>
                                            <a title='<?=$locationid.'. '.$data['Location']?>' href="javascript:void(0)" class="name"><?=$data['Location']?></td>
            <td align='left'><?=$data['Location_Desc']?></td>
        </tr><? $locationid++;} }