var couleurUnique = 1;
$("[id^=branche_search_form_couleurs_]").on("click", function() {
if (!$(this).is(":not(:checked)")) {
var $newDivCouleur = $('<div class="poPupFiltre '+$(this).attr('id')+'"><div class="sousBlockPoPup"><a href="#" class="aPoPup"><img class="img-fluid imgPoPup" src="#" alt=""></a><p class="textPopUp"></p></div></div>');
$newDivCouleur.attr("id", "PopUpCouleur_" + couleurUnique++);
$($newDivCouleur).appendTo(".maxWidthPoPup").find(".textPopUp").html($(this).val());
} else {
console.log("TEST");
$(document).find(".poPupFiltre."+$(this).attr('id')).remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="branche_search_form_couleurs_1" />
<input type="checkbox" id="branche_search_form_couleurs_2" />
<div class="maxWidthPoPup">
<div class="textPopUp"></div>
</div>
I think you need something like this,
What I have done is just add a class with the reference id of checkbox when it’s unchecked the class matches with the selected checkbox id will be removed.