JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Exemple sans délégation d'évènements -->

<!-- Le bouton ajout checkbox -->
<input type="button" id="ajout-checkbox" value="Ajouter une checkbox" />    

<div id="checkboxes-container">
    <!-- Les checkboxes -->
    <input class="toBeChecked" type="checkbox" value="1" />
    <input class="toBeChecked" type="checkbox" value="2" />
</div>



<!-- la console -->
<div id="logger"></div>

CSS

body:before { content:"Cochez nous !"; font-size: 20px; }
* { margin: 10px; }

JavaScript

// Initialisation des évènements
$('.toBeChecked').change(function(){
    var action = ($(this).is(':checked')) ? 'cochée' : 'dé-cochée';
    // On loggue l'action effectuée
    log( $(this).val() + ' a été '+ action +' !' );
});

$('#ajout-checkbox').click(function(){
    var value = $('.toBeChecked').length + 1;
    var $checkbox = $('<input type="checkbox" />');
    $checkbox.addClass('toBeChecked').val( value );
    $('#checkboxes-container').append( $checkbox );
});

// fonction log pour afficher les messages
function log(message) { $('#logger').append('<p>' + message + '</p>'); }