Why does give mine php-storm give me a error at the if-statement line?

I've made some jQuery script It's works perfect in codepen: https://codepen.io/schuermans/pen/oRLPLZ But when I try it in php-storm it doesn't give the if-statement and directly shows the else statement. Somebody can see the mistake?

BTW: it's works also here... but not in php-storm and when i run my .html file

    $(document).ready(function() {
        $("i").click(function() {
            $(this).css("color", "#5c8c44").addClass("checked");
            $(this).parent().css("font-weight", "bold");

            CheckList = $(".checked").length;
            $("#count").text("Je hebt  " + CheckList + " van de 12 benodigheden!");
            if ($('li').length == CheckList) {
                $("#information").text("Je bent helemaal voorbereid om te vertrekken op je eerste avontuur!")
            } else {
                $("#information").text("Uw checklist is nog niet compleet")
            }
        });

        $("#reset").click(function() {
            $("#information").text("De checklist is gereset");
            $("#count").text("Je hebt nog geen items aangevinkt");
            $("i").removeClass("checked");
            $("i").css("color", "red");
            $("li").css("font-weight", "normal");
        });
    });

 ul li {
    list-style: none;
  }

  ul li i {
    color: red;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<p>Klik op het icoontje wanneer het item klaar ligt zodat je niets vergeet tijdens het geocachen</p>
                <p id=count></p>
                <ul>
                    <li><i class="fas fa-check-square"></i> Smartphone</li>
                    <li><i class="fas fa-check-square"></i> Handschoenen</li>
                    <li><i class="fas fa-check-square"></i> Batterijen</li>
                    <li><i class="fas fa-check-square"></i> Zakmes</li>
                    <li><i class="fas fa-check-square"></i> Pen of poltood</li>
                    <li><i class="fas fa-check-square"></i> Notitieboekje</li>
                    <li><i class="fas fa-check-square"></i> Verrekijker</li>
                    <li><i class="fas fa-check-square"></i> Pincet</li>
                    <li><i class="fas fa-check-square"></i> Magneet</li>
                    <li><i class="fas fa-check-square"></i> Zaklamp</li>
                    <li><i class="fas fa-check-square"></i> Spiegeltje</li>
                    <li><i class="fas fa-check-square"></i> Vergrootglas</li>
                </ul>
                <p id=information></p>
                <button type="button" class="btn btn-success btn-lg btn-block" id="reset">Reset mijn checklist</button>