Ajuda com href="javascript:;"

Estou com esse código abaixo, e precisando da ajuda dos amigos para criar um evento que funcione o href="javascript:;" da DIV id="cats-list", para trazer somente os produtos referente a Categoria selecionada na DIV id="songs-list",
pois no momento ao clicar em qualquer uma das duas categorias cadastradas, esta me trazendo todos os produtos
cadastrados na tabela "PRODUTOS".

Acredito que tenha que criar um evento para essa function, porém sou muito leigo em JavaScript,
e conto com a ajuda dos amigos.

Endereço para acesso a página:
http://www.lccinformatica.com.br/

<?php include "conexao.php"; ?>
<div id="produtos-content">
 <!-- Listando os Categorias -->
 <?php
 $nome_cat = $_POST['nome_cat'];
 $img_cat = $_POST['img_cat'];
 $query_categoria = mysql_query("SELECT * FROM categoria");
 while($res = mysql_fetch_array($query_categoria)){
 ?>
 <div style="float:left; width:112px; height:133px; padding:2px 10px;" id="cats-list">
 <a class="cat-link" href="javascript:;" title="<?php echo $res['nome_cat']; ?>">
 <img style="position:relative; top:50%; transform:translateY(-50%);"
 src="img_cate/<?php echo $res['img_cat']; ?>" width="100"
 title="<?php echo $res['nome_cat']; ?>" />
 </a>
 <div style="background:#2f2140; ; width:880px;z-index:999;border-radius:25px;" class="single-cat">
 <h1 align="center" style="width:830px; margin-top:-40px;"><?php echo $res['nome_cat']; ?></h1>
 <div style="margin-left:357px;width:50px;" class="cat-links">
 <a class="close-btn" href="javascript:;" title="Voltar">
 <img src="img/fechar.jpg" />
 </a>
 </div>
 <?php
 $codigo = $_POST['codigo'];
 $img_prod = $_POST['img_prod'];
 $titulo = $_POST['titulo'];
 $descricao = $_POST['descricao'];
 $nome_cat = $_POST['nome_cat'];
 $query_produtos = mysql_query("SELECT * FROM produtos") or die(mysql_error());
 while($res = mysql_fetch_array($query_produtos)){
 ?>
 <div style="float:left; width:112px; height:133px; padding:2px 10px;" id="songs-list">
 <a class="song-link" href="javascript:;" title="">
 <img style="position:relative; top:50%; transform:translateY(-50%);" src="img_prod/<?php echo $res['img_prod']; ?>" width="100" title="<?php echo $res['titulo']; ?>" />
 </a>

 <div style=" margin-top:120px;z-index:999;border-bottom-right-radius:25px;border-top-right-radius:25px;" class="single-song">
 <div style="width:50px;margin-left:300px;" class="song-links">
 <a class="close-btn" href="javascript:;" title="Voltar">
 <img src="img/fechar.jpg" />
 </a>
 <div class="song-sides">
 <img style="margin:40px 0 0 -142px;" src="img_prod/<?php echo $res['img_prod']; ?>" width="369" />
 </div>
 </div>
 <h1> <?php echo $res['titulo']; ?> </h1>
 <div class="entry" style="overflow-y: hidden; padding: 0px; width: 100px;">
 <p style="font-family:Verdana, Geneva, sans-serif; size:14px; font-weight:bold; color:#ccc;">
 <?php echo nl2br($res['descricao']); ?>
 </p>
 <div class="jspContainer" style="width: 100px; height: auto;">
 <div class="jspPane" style="padding: 0px; top: 0px; width: 100px;">
 </div></div>
 </div>
 <span class="song-sides left-side"></span>
 </div>
 </div>
 <?php } ?>

 </div>
 </div>
 <?php
 }
 ?>
 </div>
 </div>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".single-cat .close-btn").click(function(){
jQuery(this).parent().parent().fadeOut();
});

jQuery(".single-song .close-btn").click(function(){
jQuery(this).parent().parent().fadeOut();
});
});
</script>