Carregar dados dinamicamente ajax e php

Bom dia galera! Estou com um dúvida. Preciso fazer o carregamento dinâmico de dados vindo do DB. Eu consigo fazer com o campo select. Por exemplo, quando seleciono o primeiro select, abaixo ele lista o outro campo select, e assim sucessivamente, no total são 3 campos. Grupos, Clientes e Instalações. Mas eu não quero que abre com um campo select, eu quero que clique no grupo e apareça em baixo o cliente, e quando clicar em cliente aparecer instalações, com seus respectivos ID. Desde já agradeço aí quem puder ajudar.

Meu código em ajax:

<script>
 $(document).ready(function(){
 // Evento change no campo tipo
 $("select[name=nome_grupo]").change(function(){
 // Exibimos no campo marca antes de concluirmos
 $("select[id=clientes]").html('<option value="">Carregando...</option>');
 // Exibimos no campo marca antes de selecionamos a marca, serve também em caso
 // do usuario já ter selecionado o tipo e resolveu trocar, com isso limpamos a
 // seleção antiga caso tenha feito.
 $("select[id=instalacao]").html('<option value="">Escolha uma instalação...</option>');
 // Passando tipo por parametro para a pagina ajax-marca.php
 $.post("[url=[http://localhost/wordpress/wp-content/themes/onetone/accordion/dados.php](http://localhost/wordpress/wp-content/themes/onetone/accordion/dados.php)][http://localhost/wordpress/wp-content/themes/onetone/accordion/dados.php](http://localhost/wordpress/wp-content/themes/onetone/accordion/dados.php)",[/url]
 {id:$(this).val()},
 // Carregamos o resultado acima para o campo marca
 function(valor){
 $("select[id=clientes]").html(valor);
 }
 )
 })
 // Evento change no campo marca
 $("select[id=clientes]").change(function(){
 // Exibimos no campo modelo antes de concluirmos
 $("select[id=instalacao]").html('<option value="">Carregando...</option>');
 // Passanddo marca por parametro para a pagina ajax-modelo.php
 $.post("[url=[http://localhost/wordpress/wp-content/themes/onetone/accordion/dados1.php](http://localhost/wordpress/wp-content/themes/onetone/accordion/dados1.php)][http://localhost/wordpress/wp-content/themes/onetone/accordion/dados1.php](http://localhost/wordpress/wp-content/themes/onetone/accordion/dados1.php)",[/url]
 {id:$(this).val()},
 // Carregamos o resultado acima para o campo modelo
 function(valor){
 $("select[id=instalacao]").html(valor);
 }
 )

 })

 })
</script> Código em PHP:

<?php
include("conexao.php");

try {

$id_dados = strip_tags(trim($_POST['id']));
$resu = $pdo->query("SELECT * FROM cad_clientes WHERE id_grupo = $id_dados ");
$resu->bindValue(1, $id_dados);
$resu->execute();
 }

catch(Exception $e) {

print "ERRO!:". $e->getMessage() . "<br>";
die();
}
while($lista = $resu->fetch(PDO::FETCH_ASSOC)) {
echo '<option value="'.$lista['id_cliente'].'">'.$lista['nome_cliente'].'</option>';
}
?>

Index:

<div class="alinhar">
<form name="listadados" id="listadados" action="">
Grupo: <select name="nome_grupo" id="grupo">
<option value="">Escolha o grupo</option>
<?php while($resut = $resu->fetch(PDO::FETCH_ASSOC)) { ?>
<option value="<?php echo $resut['id_grupo']; ?>"><?php echo $resut['nome_grupo']; ?></option>
<?php } ?>
</select>
<br><br>
Clientes: <select name="nome_cliente" id="clientes"></select>
<br><br>
Instalações: <select name="nome_instalacao" id="instalacao"></select>
</form>
</div>