JSFiddle - React, Tailwind, and code Playground

HTML

<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>

JavaScript 1.7

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

var skills = ["centres", "tirs", "dribbles", "passes", "vitesse"]
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);