hide and show a feature from group feature with checkbox in leaflet

Question

To begin I will explain the code, I have a checkbox generated after loading the web page by the next code

    var CPID = new L.GeoJSON(false,
{
          onEachFeature: function (feature, my_Layer) {
           var element = document.getElementById("DDL");
           //alert(feature.properties.id_cp)
           element.innerHTML += ' <br>&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="' + feature.properties.id_cp + '" value="' + feature.properties.id_cp + '" name="Circuit" onchange="CP(this.id)">';
           element.innerHTML += '<img style="width:30px;height:10px;" src="images/CP/' + feature.properties.id_cp + '.png" /><label>&nbsp;&nbsp;' + feature.properties.id_cp + '</label>';

}
});
var urlCPID = 'http://localhost:8080/geoserver/Gestion-proprete/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Gestion-proprete:CP_ID&maxFeatures=500&outputFormat=text/javascript&format_options=callback:getJsoncp&srsName=EPSG:4326'
$.ajax({
    jsonp: false,
    url: urlCPID,
    type: 'GET',
    dataType: 'jsonp',
    jsonpCallback: 'getJsoncp',
    success: function (data) {
        CPID.addData(data);
    }
});

This code will fill the list of the checkbox from layer wfs share in geoserver after this

when I checked one of this box he called this function

function CP(code) {
    var group = new L.featureGroup();
    var CPG = new L.GeoJSON();
    var CPG = new L.GeoJSON(false,
            {
                onEachFeature: function (feature, my_Layer) {
                    my_Layer.bindPopup("ID: " + feature.properties.id_cp + "<br />ID_arrondissement: " + feature.properties.id_a);
                }
            });


    var urlCP = 'http://localhost:8080/geoserver/Gestion-proprete/ows?service=WFS&version=1.0.0&viewparams=id_cp:' + code + '&request=GetFeature&typeName=Gestion-proprete:circuit_planifier&maxFeatures=1960&outputFormat=text/javascript&format_options=callback:getJson' + code + '&srsName=EPSG:4326';
 $.ajax({
        jsonp: false,
        url: urlCP,
        type: 'GET',
        dataType: 'jsonp',
        jsonpCallback: 'getJson' + code,
        success: function (data) {
            CPG.addData(data);
        }
 });


 if ($("#" + code).prop('checked')) {
     CPG.addTo(group);
     group.addTo(map);
 }
 else {
     map.removeLayer(group);
 }
}

In this code I have a query that take a parameter, id of feature then it make me to display features by id. For the display it work very well but to display the feature checked its not working. The problem is i want to display features by checking