Q:

jQuery Product Count?

I have created a nice alphabetical filter in jQuery that seems to work quite well. Here it is working: http://staging.morningsidepharm.com/products/generic-medicines/ 
Essentially it sits atop a list of products and then filters them when you click on a letter. Here's the code it's using:
// Alphabetical Filter for Products

var $boxes = jQuery('.elementor-posts-container > .elementor-post');

var $btns = jQuery('.alphabet-btn').click(function() {
  var id = this.id;
  if (id == 'all') {
    $boxes.show()
  } else {
    $boxes.hide().filter(function() {
      var re = new RegExp('^' + id, 'i');
      return re.test($(this).text().trim());
    }).show()
  }
  $btns.removeClass('alphabet-active');
  $(this).addClass('alphabet-active');
});

Along with this HTML: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="alphabet-active alphabet-btn alphabet-all" id="all">Show All</button>
<button class="alphabet-btn" id="a">A</button>
<button class="alphabet-btn" id="b">B</button>
<button class="alphabet-btn" id="c">C</button>
<button class="alphabet-btn" id="d">D</button>
<button class="alphabet-btn" id="e">E</button>
<button class="alphabet-btn" id="f">F</button>
<button class="alphabet-btn" id="g">G</button>
<button class="alphabet-btn" id="h">H</button>
<button class="alphabet-btn" id="i">I</button>
<button class="alphabet-btn" id="j">J</button>
<button class="alphabet-btn" id="k">K</button>
<button class="alphabet-btn" id="l">L</button>
<button class="alphabet-btn" id="m">M</button>
<button class="alphabet-btn" id="n">N</button>
<button class="alphabet-btn" id="o">O</button>
<button class="alphabet-btn" id="p">P</button>
<button class="alphabet-btn" id="q">Q</button>
<button class="alphabet-btn" id="r">R</button>
<button class="alphabet-btn" id="s">S</button>
<button class="alphabet-btn" id="t">T</button>
<button class="alphabet-btn" id="u">U</button>
<button class="alphabet-btn" id="v">V</button>
<button class="alphabet-btn" id="w">W</button>
<button class="alphabet-btn" id="x">X</button>
<button class="alphabet-btn" id="y">Y</button>
<button class="alphabet-btn" id="z">Z</button>

and this CSS:
.alphabet-btn {
  height: 30px;
  width: 30px;
  font-size: 16px;
  border-radius: 0;
  border: none;
  font-weight: 100;
  background-color: #1b91c3;
  color: #ffffff;
  padding: 0;
  text-decoration: none;
  margin: 5px 0 0 0;
}

.alphabet-btn:hover {
  background-color: #134583;
}

.alphabet-active {
  background-color: #134583;
  text-decoration: none;
}

.alphabet-all {
  width: 100px;
}

A few, more complex filters I have seen provide a product count when you hover over them like this: 

Would anyone know of a way to add this functionality to my existing filter? 
I assume I will need something to count each letter on load and then display it on hover... I'm not even sure if its possible with the approach I've taken? 
Any help is greatly appreciated :) 
Many thanks! 

A:

You can use the basics  of what you already have to give you a count for each letter when page loads. 
Loop over all your alphabet elements , filter the boxes that match and get the length of that collection. then append or prepend another element in each letter and add a bit of style to position it and round it out etc
$('.alphabet-btn').each(function() {
  var id = this.id;

  var count =  $boxes.filter(function() {
      var re = new RegExp('^' + id, 'i');
      return re.test($(this).text().trim());
    }).length

  $(this).append('<span class="count">' + count +'</span>')
});

You could also use this to add a class to each box like box_a, box_c, ...box_z etc and simplify the other filtering by just looking for that matching class

