i am using PHP MYSQL and JAVASCRIP AJAX.

i have multiple dropdown list that i want to make it dependent on each other using AJAX where these dropdown list includes data retrieved from MYSQL database.

the user select from the first dropdown list and based on its selection the second and third dropdown list display the related values.

what i have done until now is to make the second dropdown list depend on the first one.

i need now to make the second and third be depend on the first one.

tables

site_info:
    siteID
    siteNAME
    ownerID
    companyID

owner_info:
    ownerID
    ownerNAME

company_info:
    companyID
    companyNAME

debug MODE:

first pic shows the first AJAX call

Second pic shows the second AJAX call

where is the error in my code ??

code1:

<form method ="post" action ="" name="submit_form">
    <table border="0" width="30%">
        <tr>
           <td>Site Name</td>
           <td>Owner Name</td>
           <td>Company Name</td>
           <td>Subcontractor Name</td>
         </tr>
         <tr>
           <td><select id="site_name"  name = "site_name">

             <?php


                 $query_site_name =$wpdb->get_results("select DISTINCT siteNAME, ownerID, companyID  from site_info");
                  foreach($query_site_name as $row)
                  {
        //           $site_name = (array)$site_name;
                   echo "<option value = '".$row ->ownerID."', '".$row ->companyID."'>".$row->siteNAME."</option>";
                  } 

             ?>

            <!--create  dropdown list owner names-->
            </select></td>

            <td><select id="owner_name"  name ="owner_name">
            <option value="">Select Owner</option>        
            </select></td>

            <!--create  dropdown list Company names-->


            <td><select id="Company_name"  name ="Company_name">
             <option value="">Select Company</option>       




     <script type="text/javascript">

// make Dropdownlist depend on each other
$(document).ready(function(){
// depend owner name on site name   
    $('#site_name').change(function(){
         var ownerID = $(this).val();
         $.ajax({
            url:"<?php echo get_stylesheet_directory_uri(); ?>/dropdown_fetch_owner.php",
            method:"POST",
            data:{ownerID:ownerID},
            datatype:"text",
            success:function(data){
                $('#owner_name').html(data);
            }

         });

//depend company name on site name 
         var companyID = $(this).val();
         $.ajax({
            url:"<?php echo get_stylesheet_directory_uri(); ?>/dropdown_fetch_owner.php",
            method:"POST",
            data:{companyID:companyID},
            datatype:"text",
            success:function(data){
                $('#Company_name').html(data);
            }

         });


      });

  });

</script>

dropdown_fetch_owner.php

<?php
 include_once($_SERVER['DOCUMENT_ROOT'].'/wordpress/wp-load.php');
 global $wpdb;
$outputOwner = '';
$sql =$wpdb->get_results("select ownerID, ownerNAME from owner_info where ownerID = '".$_POST['ownerID']."' ORDER BY ownerNAME");
var_dump($sql);

$outputOwner= '<option value="">Select Owner</option>';
foreach($sql as $row){


    $outputOwner.= "<option value = '".$row ->ownerID."'>".$row->ownerNAME."</option>";
}
echo $outputOwner;


$outputCompany = '';
$sql =$wpdb->get_results("select companyID, companyNAME from company_info where companyID = '".$_POST['companyID']."' ORDER BY companyNAME");
var_dump($sql);

$outputCompany= '<option value="">Select Company</option>';
foreach($sql as $row){

    $outputCompany.= "<option value = '".$row ->companyID."'>".$row->companyNAME."</option>";
}
echo $outputCompany;

?>