how to add an image only in the checkbox marked

Question

I wonder how I can add an image with append only inside the span.abcd that is next to the checkbox marked.

HTML

<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>

Javascript

$('input[type=checkbox]').change(function(){
    if($(this.checked)){
       $(".abcd").append('<img id="hea" class="img-responsive" src="../images/heart.png">');
       return;
    }
});

With this code the moment I click on checkbox he adds to img of the append in all the span with class abcd and I would like it to add up just span next to the checkbox that was clicked.

Answer 1

You can use it like this:

$(this).closest('.hovereffect').find(".abcd").append(

Basically you have as a starting point this, Climb up the DOM and look for the classy div .hovereffect and then descend with .find(".abcd"), and this is your span...