Limit number of javascript automated generated checkbox

kinda worried with following code that should automatically generate checkbox content AND limit up to 3 the number of checked boxes.

Separately both codes work fine, the issue occurs when they are combined:

    <form name="competencies" action="algo.php" method="POST">
    <div class="container">
        <ul class="ks-cboxtags"  id="skillsContainer">
        <input class="button" type="submit" value="Valider">
        </ul>
    </div>
   </form>

        <script type="text/javascript">
        $('input[type=checkbox]').change(function(e){
        if ($('input[type=checkbox]:checked').length > 3) {
        $(this).prop('checked', false);
        }
        });



        var skills = [<?php echo '"'.implode('","',  $miss).'"' ?>];
        var skillContainer = $("#skillsContainer");
        skills.forEach(skill => skillContainer.append('<li> <input type=\"checkbox\" id=\"'+ skill +'\" value=\"'+ skill +'\"> <label for=\"'+ skill +'\"> '+ skill +' </label> </li>'));

        console.log(skillContainer);
        $("#skillsContainer").append(checkboxElement);
    </script>

jsfiddle = here

any idea ?