Unintuitive behavior of jQuery generated DOM elements, generated within a loop

Question

Why does this code

var body = $('body');
for(var i = 0; i < 5; i++){
    var span = $(document.createElement('span')).html('click here <br />').click(function(){
        console.log(i);
    });
    body.append(span);
}

always print 5 to the console when I click on the element?

EDIT: Credit goes to @Bergi for pointing me in the right direction. Sorry I missed that.