**EDIT:** Como esta adicionando vários elementos eles não podem ter o mesmo ID, utilize a class para identifica-los, e para remover faça a busca no mesmo parent em que foi adicionado anteriormente... <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $('input[type="checkbox"]').on('change', function() { var $parent = $(this).parents('.hovereffect'); if (this.checked) { $('.abcd', $parent).append('<img class="hea img-responsive" src="../images/heart.png">'); } else { $('.hea', $parent).remove(); } }); <!-- language: lang-html --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="hovereffect"> <span class="abcd"></span> <img id="he" class="img-responsive" src="http://placehold.it/350x200" alt=""> <div class="overlay"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary cke"> <input type="checkbox" value="nao"><i class="fa fa-heart"></i> </label> </div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="hovereffect"> <span class="abcd"></span> <img class="img-responsive" src="http://placehold.it/350x200" alt=""> <div class="overlay"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary cke"> <input type="checkbox" value="nao"><i class="fa fa-heart"></i> </label> </div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="hovereffect"> <span class="abcd"></span> <img class="img-responsive" src="http://placehold.it/350x200" alt=""> <div class="overlay"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary cke"> <input type="checkbox" value="nao"><i class="fa fa-heart"></i> </label> </div> </div> </div> </div> <!-- end snippet -->