Event not triggering until 3rd click - php

Question

I have a filter by alphabet within a WordPress website that I would like to filter when the letter is selected without the user having to select the letter and then the search button. However it only seems to work after the 3rd click and that is if you click quickly. The filter itself is a customisation for an existing WordPress directory theme, here is a link to the directory: https://staging.pata.org.uk/item/. How can I get the click to trigger on the first click of a letter rather than the third?
This is the jquery:
<script type="text/javascript">
jQuery(document).ready(function(){
// filter type actions
// checkbox
jQuery('.advanced-filters-wrap-letter ul li.filter-checkbox-letter').on('click', function(e){
jQuery(this).toggleClass('filter-enabled');
var $input = jQuery(this).find('input');
if($input.is(':checked')){
$input.removeAttr('checked');
} else {
$input.attr('checked', true);
}
// filter submit actions
jQuery('.filter-container').on('click', function(e){
e.preventDefault();
// build new query
var addToFilter = "";
var filterString = "";
var filterCheck = 0;
// &filters=id;id;id
jQuery('.advanced-filters-wrap ul li').each(function(){
var $inputOne = jQuery(this).find('input');
if($inputOne.is(':checked')){
addToFilter = $inputOne.val() + " ";
filterCheck += 1;
}
});
jQuery('.advanced-filters-wrap-letter ul li').each(function(){
var $input = jQuery(this).find('input');
if($input.is(':checked')){
filterString = filterString + $input.val() + " " + addToFilter;
filterCheck += 1;
}
});
filterString = filterString.trim().replace(new RegExp(' ', 'g'), ";");
var pathName = window.location.pathname;
/* remove page parameter from url */
pathName = pathName.replace(new RegExp("page\/[0-9]*\/", 'g'), "");
/* remove page parameter from url */
var baseUrl = window.location.protocol+"//"+window.location.host+pathName;
var eParams = window.location.search.replace("?", "").split('&');
var nParams = {};
jQuery.each(eParams, function(index, value){
var val = value.split("=");
if(typeof val[1] == "undefined"){
nParams[val[0]] = "";
} else {
nParams[val[0]] = decodeURIComponent(val[1]);
}
});
var query = jQuery.extend({}, nParams, { filters: filterString });
if(filterCheck == 0){
delete query.filters;
}
delete query.paged;
delete query.count;
// remove empty keys
jQuery.each(query, function(k, v){
if(!k){
delete query[k];
}
});
var queryString = jQuery.param(query);
window.location.href = baseUrl + "?" + queryString;
});
});
});
</script>
and this is the rest of the code
<?php
// &filters=id;id;id;id
$themeOptions = aitOptions()->getOptionsByType('theme');
$advancedFiltersOptions = (object)$themeOptions['itemAdvancedFilters'];
if($advancedFiltersOptions->enabled){
$filters_avalaible = get_terms('ait-items_filters', array('hide_empty' => false));
$filters_enabled = array();
if(isset($_REQUEST['filters']) && !empty($_REQUEST['filters'])){
$filters_enabled = explode(";",$_REQUEST['filters']);
}
if($query->max_num_pages != 1){
// check if there will be pagination
$item_query_args = $query->query_vars; // populate new variable ... dont modify original query
$item_query_args['nopaging'] = true;
$item_query = new WP_Query($item_query_args);
} else {
$item_query = $query;
}
$item_filters = array();
foreach($item_query->posts as $post){
$post_meta = get_post_meta( $post->ID, '_ait-item_filters-options');
if(!empty($post_meta)){
$post_filters = $post_meta[0]['filters'];
foreach ($post_filters as $id) {
$filter = get_term($id, 'ait-items_filters', "OBJECT");
if(!empty($filter)){
array_push($item_filters, $filter);
}
}
}
}
$unique_filters = array_map("unserialize", array_unique(array_map("serialize", $item_filters)));
$filters_avalaible = $unique_filters;
usort($filters_avalaible, function($a, $b){
return strcmp($a->slug, $b->slug);
});
?>
<?php
if(is_array($filters_avalaible) && count($filters_avalaible) > 0){
?>
<div class="advanced-filters-wrap-letter">
<div class="advanced-filters-container">
<div class="content">
<h3>Alphabetical</h3>
<ul class="advanced-filters columns-<?php echo $advancedFiltersOptions->filterColumns ?>">
<?php
$array=array("A", "B", "C", "D", "E", "F","G","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
$letters = array();
foreach($filters_avalaible as $filter){
if(in_array($filter->name,$array)) {
array_push($letters, $filter);
}
}
?>
<?php
foreach($letters as $letter)
{
if(!empty($letter))
{
$filter_options = get_option( "ait-items_filters_category_".$letter->term_id );
$filter_type = isset($filter_options['type']) ? $filter_options['type'] : 'checkbox';
$is_enabled = in_array($letter->term_id, $filters_enabled);
$li_class = "";
$in_checked = "";
if($is_enabled){
$li_class = "filter-enabled";
$in_checked = "checked";
}
switch($filter_type){
case 'checkbox':
/*$imageClass = !empty($filter_options['icon']) ? 'has-image' : '';*/
$imageClass = 'has-image';
$image = !empty($filter_options['icon']) ? '<i class="fa '.$filter_options['icon'].'"></i>' : '<i class="fa fa-dot-circle-o"></i>';
echo '<li class="filter-container filter-checkbox-letter '.$li_class.' '.$imageClass.' "><input type="checkbox" name="'.$letter->slug.'" value="'.$letter->term_id.'" '.$in_checked.'> <span class="filter-name">'.$letter->name.'</span></li>';
break;
default:
echo '<li class="filter-container filter-unsupported">'.__('Unsupported filter', 'ait-advanced-filters').'</li>';
break;
}
}}}?>
</ul>
</div>
</div>
<div class="advanced-filters-actions">
<?php _e('Search', 'ait') ?>
Back
</div>
</div>
<?php
}