filter using radio button - php

Question

Hi I have some products on a website I'm building that I want to be able to filter by the product range that they come from. I have managed to make a filter for specific brands using a drop down menu, but would like to be able to filter the range when clicking on a label/selecting a radio button. I am using php and jquery to try and achieve this, can anybody tell me where I'm going wrong and what I need to do to fix this?
This is my php/html which shows the options of product ranges.
<!-- Product Range -->
<div id="product_range">
<?php
$sql = "SELECT * FROM `product_range`";
$result = $conn->query($sql);
if ($result->num_rows > 0){
// Output data of each rowt
while($row = $result->fetch_assoc()){
//echo "Brand : " . $row["brand"] . " - Product : " . $row["name"] . " - " . $row["description"] . " - Price : " . $row["price"] . "<br>";
echo "<div class='col-lg-6 col-md-4 col-sm-5 col-xs-12 product_range " . $row['brandName'] . " all' id='products'>
<div class='hovereffect'>
<img class='img-responsive product_range_img' src='" . $row['img'] . "' alt=''>
<div class='overlay1'>
<h2> " . $row['name'] . "</h2>
<p>
" . $row['title'] . "
<br>
<br>
<form>
<input type='radio' class='radio' name='selector' value='" . $row['product_range'] . "' />
<label for='" . $row['product_range'] . "' id='labelSelect'>
View Products
</label>
</form>
</p>
</div>
</div>
</div>";
}
} else {
echo "0 results";
}
?>
</div>
I then have this part which is the products i wish to display on click.
<!-- Product packs -->
<div id="product_group">
<?php
$sql = "SELECT * FROM `product_packs`";
$result = $conn->query($sql);
if ($result->num_rows > 0){
// Output data of each rowt
while($row = $result->fetch_assoc()){
//echo "Brand : " . $row["brand"] . " - Product : " . $row["name"] . " - " . $row["description"] . " - Price : " . $row["price"] . "<br>";
echo "<div class='col-lg-2.4 col-md-3.4 col-sm-4 col-xs-12 products " . $row['brandName'] . " all " . $row['product_range'] . "' id='products'>
<div class='hovereffect'>
<img class='img-responsive productimg' src='" . $row['img'] . "' alt=''>
<div class='overlay1'>
<h2> " . $row['name'] . "</h2>
<p>
" . $row['title'] . "
<br>
" . $row['header'] . "
<br>
<br>
" . $row['price'] . "
<br>
<a href='#'>
Add To Cart
</a>
</p>
</div>
<div class='overlay2'>
<div class='overlay3'>
<p>
This is the description
</p>
</div>
</div>
</div>
</div>";
}
} else {
echo "0 results";
}
?>
</div>
<!-- Single products -->
<div id="product">
<?php
$sql = "SELECT * FROM `products`";
$result = $conn->query($sql);
if ($result->num_rows > 0){
// Output data of each rowt
while($row = $result->fetch_assoc()){
//echo "Brand : " . $row["brand"] . " - Product : " . $row["name"] . " - " . $row["description"] . " - Price : " . $row["price"] . "<br>";
echo "<div class='col-lg-2.4 col-md-3.4 col-sm-4 col-xs-12 products " . $row['brandName'] . " all " . $row['product_range'] . "' id='products'>
<div class='hovereffect'>
<img class='img-responsive productimg' src='" . $row['img'] . "' alt=''>
<div class='overlay1'>
<h2> " . $row['name'] . "</h2>
<p>
" . $row['title'] . "
<br>
<br>
" . $row['price'] . "
<br>
<a href='#'>
Add To Cart
</a>
</p>
</div>
<div class='overlay2'>
<div class='overlay3'>
<p>
" . $row['description'] . "
</p>
</div>
</div>
</div>
</div>";
}
} else {
echo "0 results";
}
?>
</div>
this is the jquery i have at the moment, but it only displays the products, not yet filter them.
$(document).ready(function(){
$("#labelSelect").click(function(){
$("#product_range").hide();
$("#product_group").show();
$("#product").show();
$("." + $("input[type='radio'][name='selector']:checked")).show();
$("products:not(." + $("input[type='radio'][name='selector']:checked") + ")").hide();
});
});
Thanks in advance for your help.