how to add an image only in checked checkbox [duplicate]

I would like to know how I can do to add an image with append only within span.abcd that is next to the checked checkbox.

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 when I click on checkbox it adds the img of append to all span with class abcd and I'd like it to add just span next to checkbox that was clicked.