Semantic-UI Multiple selection with PHP - php

Question

I want to use JS library "Semantic-UI" with my PHP code
I want to replace the ordinary select boxes with "Semantic-UI Multiple selection Dropdown"
The original PHP Code that generates the Select items:
<div class="list-group">
<h3>Material</h3>
<?php
$query = "SELECT DISTINCT(product_gender) FROM product";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
?>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector gender" value="<?php echo $row['product_gender']; ?>" > <?php echo $row['product_gender']; ?></label>
</div>
<?php
}
?>
</div>
I want to replace input with Semantic-UI :
<div class="list-group">
<h3>Gender</h3>
<select multiple="" class="label ui selection fluid dropdown">
<?php
$query = "SELECT DISTINCT(product_gender) FROM product";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
?>
<div class="list-group-item checkbox">
<option name='gender' class="common_selector gender" value="<?php echo $row['product_gender']; ?>"><?php echo $row['product_gender']; ?></option>
</div>
<?php
}
?>
</select>
</div>
It gathers the options, But didn't post data, since the function that posts data is :
<script>
$(document).ready(function(){
filter_data();
function filter_data()
{
$('.filter_data').html('<div id="loading" style="" ></div>');
var action = 'fetch_data';
var es2 = get_filter('es2');
var bw2 = get_filter('bw2');
var tl = get_filter('tl');
var b2 = get_filter('b2');
var gender = get_filter('gender');
var material = get_filter('material');
var hinge = get_filter('hinge');
$.ajax({
url:"fetch_data.php",
method:"POST",
data:{action:action, es2:es2, bw2:bw2, tl:tl, b2:b2, gender:gender, material:material, hinge:hinge},
success:function(data){
$('.filter_data').html(data);
}
});
}
function get_filter(class_name)
{
var filter = [];
$('.'+class_name+':checked').each(function(){
filter.push($(this).val());
});
return filter;
}
$('.common_selector').click(function(){
filter_data();
});
});
And we get Data by this :
if(isset($_POST["gender"]))
{
$gender_filter = implode("','", $_POST["gender"]);
$query .= "
AND product_gender IN('".$gender_filter."')
";
}
if(isset($_POST["material"]))
{
So please how can I merge Semantic-UI with my code ?