diff --git a/index.html b/index.html
index 65c7c8ba4429646b1febc0cd46eb93d7e9306573..80c5f32046b49ffabb58fe1112aaebbaea0f4568 100644
--- a/index.html
+++ b/index.html
@@ -1077,10 +1077,10 @@
                   <td style="width:25%"><h4 class="modal-title modal-left">Sex Filter</h4></td>
                   <td>
                     <nav>
-                      <ul class="pagination">
-                        <li id="search-gender-1" class="active"><a href="#"  onclick="changeSearchGender(1)">All</a></li>
-                        <li id="search-gender-2"><a href="#" onclick="changeSearchGender(2)">Male</a></li>
-                        <li id="search-gender-3"><a href="#" onclick="changeSearchGender(3)">Female</a></li>
+                      <ul class="pagination" id="search-gender">
+                        <li class="active"><a href="#"  data-value="1">All</a></li>
+                        <li><a href="#" data-value="2">Male</a></li>
+                        <li><a href="#" data-value="3">Female</a></li>
                       </ul>
                     </nav>
                   </td>
@@ -1163,11 +1163,11 @@
                   <td style="width:25%"><h4 class="modal-title modal-left">Sex Filter</h4></td>
                   <td>
                     <nav>
-                      <ul class="pagination">
-                        <li id="group-search-gender-1" class="active"><a href="#"  onclick="changeGroupSearchGender(1)">Any</a></li>
-                        <li id="group-search-gender-2"><a href="#" onclick="changeGroupSearchGender(2)">Male only</a></li>
-                        <li id="group-search-gender-3"><a href="#" onclick="changeGroupSearchGender(3)">Female only</a></li>
-                        <li id="group-search-gender-4"><a href="#" onclick="changeGroupSearchGender(4)">Mixed</a></li>
+                      <ul class="pagination" id="group-search-gender">
+                        <li class="active"><a href="#"  data-value="1">Any</a></li>
+                        <li><a href="#" data-value="2">Male only</a></li>
+                        <li><a href="#" data-value="3">Female only</a></li>
+                        <li><a href="#" data-value="4">Mixed</a></li>
                       </ul>
                     </nav>
                   </td>
diff --git a/js/spniSelect.js b/js/spniSelect.js
index 8c48ab133e4161a23f193c6698a71ca49cdde48e..7139536262f3182e529ebbc04413e7bcafb32c6c 100644
--- a/js/spniSelect.js
+++ b/js/spniSelect.js
@@ -1243,9 +1243,13 @@ function clearSearch() {
 
 function changeSearchGender(gender) {
     chosenGender = gender;
-    setActiveOption($searchGenderOptions, gender);
+    setActiveOption("search-gender", gender);
 }
 
+$('ul#search-gender').on('click', 'a', function() {
+    changeSearchGender(parseInt($(this).attr('data-value'), 10));
+});
+
 function openGroupSearchModal() {
     $groupSearchModal.modal('show');
 }
@@ -1269,9 +1273,12 @@ function clearGroupSearch() {
 
 function changeGroupSearchGender(gender) {
     chosenGroupGender = gender;
-    setActiveOption($groupSearchGenderOptions, gender);
+    setActiveOption("group-search-gender", gender);
 }
 
+$('ul#group-search-gender').on('click', 'a', function() {
+    changeGroupSearchGender(parseInt($(this).attr('data-value'), 10));
+});
 
 /************************************************************
  * Sorting Functions