Update dynamic lists php mysql Javascript - php

Question

I have 2 lists, one for companies and one for sites. Each company has different sites around the country. I am am displaying 2 lists side by side on a modal popup. I have the companies list displaying dynamically from a query all ok, I want the second list to populate with the sites, depending on the company selection from the first list.
image of both lists side by side as I have it
The html element is as follows:
<div class="row">
<div class="col-md-6">
<div class="container-fluid">
<div style="height: 400px; overflow-y: scroll">
<div class="list-group" name="companies" id="company">
<!--Call the Showcompany() method from the select.class.php-->
<?php echo $opt->ShowCompany(); ?>
</div>
</div><!--End of first input group-->
</div><!--End of container-->
</div><!--End of column-->
<div class="col-md-6">
<div class="container-fluid">
<div style="height: 400px; overflow-y: scroll">
<div class="list-group" multiple onchange="changeSelection(this.value)" name="sites" id="sites">
<?php echo $opt->ShowSite(); ?>
</div>
</div><!--End of first input group-->
</div><!--End of container-->
</div><!--End of column-->
</div>
This is being populated from a separate included php file as follows:
//function to handle db connectivity
protected function DbConnect()
{
include "db_config.php";
$this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database");
mysql_select_db($db,$this->conn) OR die("can not select the database $db");
return TRUE;
}
//function to query the companies and return list for companies list
public function ShowCompany()
{
$sql = "SELECT company.company_name, company.id FROM company ORDER BY company.company_name ASC";
$res = mysql_query($sql,$this->conn);
$company = '<a class="list-group-item active" value="0">choose...</a>';
while($row = mysql_fetch_array($res))
{
$company .= '<a class="list-group-item" value="' . $row['id'] . '">' . $row['company_name'] . '</a>';
}
return $company;
}
//function to query the sites and return list for sites list
public function ShowSite()
{
$sql = "SELECT * FROM sites WHERE company_id=$_POST[id]";
$res = mysql_query($sql,$this->conn);
$site = '<a class="list-group-item" value="0">Select All</a>';
while($row = mysql_fetch_array($res))
{
$site .= '<a class="list-group-item" value="' . $row['id'] . '">' . $row['site_name'] . '</a>';
}
return $site;
}
The jquery I am using to try and populate the second list is as follows this is in my document.ready function.
$("#company").change(function(){
var id = $("#company a:selected").attr('value');
$.post("select_site.php", {id:id}, function(data){
$("#sites").html(data);
});
});
I have had this working when I used select dropdowns and instead of anchor tags I had option tags and it all worked, but it never looked right for what I needed so I decided to make the 2 list views.
The jQuery I had when it worked for my select and option tags was as follows:
$("select#company").change(function(){
var id = $("select#company option:selected").attr('value');
$.post("select_site.php", {id:id}, function(data){
$("select#sites").html(data);
});
});
I won't lie, jQuery is not my biggest strength and I can't for the life of me work out why it won't populate the second list. absolutely any help would be really really appreciated as I have spent the last 3 days trying to figure this out. Thank you.