Filter on bootstrap collapsion panels - php

Question

I have a page with a list of Bootstrap collapsion panels. I create these panels dynamically by first querying the database for content, see the code below:
<div class="panel-group" id="accordion">
<?php
$all_emails = "SELECT * FROM sent_emails";
if($result = mysqli_query($link, $all_emails)) {
while($rows = $result->fetch_object()) {
$db = $rows->timestamp;
$timestamp = strtotime($db);
echo '
<div class="panel panel-default m'.date("m", $timestamp).'">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse'.$rows->ai.'">
#'.$rows->ai.' | Sent to: '.$rows->mail_to.' | Subject: '.$rows->mail_subject.' <span class="pull-right">| '.$rows->timestamp.' </span>
</a>
</h4>
</div>
<div id="collapse'.$rows->ai.'" class="panel-collapse collapse">
<div class="panel-body">
'.$rows->mail_message.'
</div>
</div>
</div>
';
}
mysqli_free_result($result);
}
?>
</div>
This works fine and all, but what I want to accomplish next is adding a filter that only show the panels with a certain class in it. As you can see in the code above I create divs with the classes "panel panel-default m('month') which all have a parent div called "panel-group".
WHen I choose a month from the dropdown button as shown below, I take the value/id of the month into jQuery as input for the filter.
<div class="dropdown1">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Select month
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="select1">
<li value="january" id="m1" role="presentation">January</li>
<li value="february" id="m2" role="presentation">February</li>
<li value="march" id="m3" role="presentation">March</li>
<li value="april" id="m4" role="presentation">April</li>
<li value="may" id="m5" role="presentation">May</li>
<li value="june" id="m6" role="presentation">June</li>
<li value="july" id="m7" role="presentation">July</li>
<li value="august" id="m8" role="presentation">August</li>
<li value="september" id="m9" role="presentation">September</li>
<li value="october" id="m10" role="presentation">October</li>
<li value="november" id="m11" role="presentation">November</li>
<li value="december" id="m12" role="presentation">December</li>
</ul>
</div><!--/.dropdown1 -->
So far I have the following jQuery code. Every child div of "panel-group" that doesn't have the class let's say m10 (=October) must be hidden.
<script>
$(function(){
$("#select1").on('click', 'li', function(){
$("#dropdownMenu1").text($(this).text());
$("#dropdownMenu1").val($(this).text());
$(".panel-group").show();
$(".panel-group .panel.panel-default :not(."+this.id+")").hide();
});
});
I have been trying a lot and have searched all over the internet for an answer that satisfies what I need, but no luck so far :(

Answer 1

Hide all, then show the correct one:
$(function(){
$("#select1").on('click', 'li', function(){
$("#dropdownMenu1").text($(this).text());
$("#dropdownMenu1").val($(this).text());
$(".panel-group .panel").hide();
$(".panel-group .panel.panel-default."+this.id).show();
});
});