JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example1">
    <input type="checkbox" id="cb_1_a" value="a" >
    <input type="checkbox" id="cb_1_b" value="b" >
    <input type="checkbox" id="cb_1_c" value="c" >
    <input type="checkbox" id="cb_1_d" value="d" >
    <input type="checkbox" id="cb_1_e" value="e" >
    <input type="checkbox" id="cb_2_a" value="f" >
    <input type="checkbox" id="cb_2_b" value="g" >
    <input type="checkbox" id="cb_2_c" value="h" >
    <input type="checkbox" id="cb_2_d" value="i" >
    <input type="checkbox" id="cb_3_x" value="j" >   
</div>        
<hr>        
<div class="example2"></div>

JavaScript

var x = '';
var y = '';

// Beispiel 1
$(".example1 input:checkbox").on("click", function(){    
    x = $(this).attr("id"); // gibt die ID zurück
    y = $(this).prop("checked"); // gibt den status der checkbox zurück
    z = $(this).val(); // gibt den value wert zurück
    
    alert("ID: "+x+" | Status: "+y+" | Value: "+z);
});

// Beispiel 2
for(var i = 1; i <= 10; i++) {
    $('.example2').append('<input type="checkbox" id="cb_'+i+'" value="j" >' )
}

$(".example2 input:checkbox").on("click", function(){    
    x = $(this).attr("id"); // gibt die ID zurück
    y = $(this).prop("checked"); // gibt den status der checkbox zurück
    z = $(this).val(); // gibt den value wert zurück
    
    alert("ID: "+x+" | Status: "+y+" | Value: "+z);
});