JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class='thisClasshot'>hot
    </li>
    <li class='thisClasshot'>hot
    </li>
    <li class='thisClasscool'>cool
    </li>
    <li class='thisClassnormal'>normal
    </li>
</ul>

<span class='howmany'></span>
<span class='howmany2'></span>
<span class='howmany3'></span>
<span class='howmany4'></span>
<p class='howmany5'></p>

JavaScript

// Gets the number of elements with class yourClass


$(function() {
  var $listHTML = $('ul').html();
  $('ul').append($listHTML);
});

$( document ).ready(function() {
    var numItemshot = $('.thisClasshot').length;
    var numItemscool = $('.thisClasscool').length;
    var numItemscomplete = $('.thisClasscomplete').length;
    var numItemsnormal = $('.thisClassnormal').length;
    
    
    $('.howmany').html("counted hot: "+numItemshot) ;
    $('.howmany2').html("counted cool: "+numItemscool);
    $('.howmany3').html("counted complete: "+numItemscomplete);
    $('.howmany4').html("counted normal: "+numItemsnormal);

});
    var test = document.getElementsByClassName('howmany5');
    test.textContent = "test";