DBから取得したgenre_idをもとに絞り込み検索を行いたい

こんばんは、プログラムの勉強でECサイトのようなものを作ろうと思っています。

現状として商品一覧のページを作ることには成功しました。
しかしブートストラップのナビゲーションバーにOUTER,INNER、などジャンル別に商品を表示できるよう、絞込を行ったところで、つまづきました。
商品にはそれぞれgenre_idをふってあり、（例えばOUTERはgenre_id1,INNERはgenre_id２）
ナビゲーションバーにあるジャンルをクリックするとそのジャンルの商品のみが閲覧できるといった形にしたいです。
DBからデータは取得済みです。

お知恵を貸していただけるとうれしいです。

以下Jquery、ｈｔｍｌ

(document).ready(function(){
$.get("http://127.0.0.1:5000/product",
function(data){
console.log(data);
console.log(JSON.stringify(data));
//HTMLを初期化
$('.row').html("");
//HTMLを生成
$(data).each(function(){
$('<div class=col-md-4>' +
'<img src='+ this.img_path + '>' +
'<div>' + '【商品名】' + '</div>'+
'<div>' + this.title + '</div>'+
'<div>' + '【販売元】' + '</div>'+
'<div>' + this.manufacture + '</div>'+
'<div>' + '【在庫数】' + '</div>'+
'<div id = product_stock_' + this.id + '>' + this.stock + '</div>'+
'<div>' + '【価格】' + '</div>'+
'<div id = product_price>' + this.price + "円" + '</div>' +
'<a href=""' + 'class=btn btn-default' + 'role=button>' + '購入する' + '</a>' +
'</col-md-4>' ).appendTo('.row')
//在庫０売り切れ表示
if(this.stock==0){
$('#product_stock_' + this.id).html("<div class=product_stock>売り切れ</div>").css('color','red');
}
});
});
});
//絞り込み検索
$("#outer").click(function(){

});

HTML一部抜粋

<div id="gnavi" class="collapse navbar-collapse"> <div class="index"> <ul class="nav navbar-nav"> <li><a href="lastHtml.html">Top</a></li> <li id="outer"><a href="">Outer</a></li> <li id="inner"><a href="">Inner</a></li> <li id="backpack"><a href="">Backpack</a></li> <li id="footwear"><a href="">Footwear</a></li> <li id="tent"><a href="">Tent</a></li> <li id="burner"><a href="">Burner</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="../Cart/cart.html">Cart</a></li> <li><a href="">User:</a></li> <span class="glyphicon glyphicon-log-out" aria-hidden="true" aria-label="Right Align"></span> </ul> </div> </div> </nav> <div class="container" id="ItemList"> <div class="row"> <div class="col-md-4"> <img src="img/04.jpg"alt="Product"> <p>【商品名】</p> <p>S/S DRYCREW</p> <p>【販売元】</p> <p>THE NORTH FACE</p> <p>【在庫数】</p> <p>100</p> <p>【価格】</p> <p>3,856円</p> </div> </div> </div>``` ```