jQuery each function uses the last object

Question

This script partially works only for the last textarea object:

$('textarea[data-placeholder]').each(function () {
    var $this = $(this);
    $placeholder = $this.attr('data-placeholder');
    $placeholder = $placeholder.replace(/\<br>/g, "\n");
    $informer_id = $this.attr('data-informer-link');
    console.log('each: ' + $informer_id + ', placeholder: ' + $placeholder);

    $this.attr('value', $placeholder);

    $this.focus(function () {
        if ($this.val() == $placeholder) {
            $this.attr('value', '');
        }
    });
    $this.blur(function () {
        if ($this.val() == '') {
            $this.attr('value', $placeholder);
            console.log('each brur placeholder: ' + $informer_id);
            $('[data-informer-id=' + $informer_id + '] i.fa')
                .addClass('fa-circle')
                .removeClass('fa-check-circle');
        } else {
            console.log('each brur value: ' + $informer_id);
            $('[data-informer-id=' + $informer_id + '] i.fa')
                .removeClass('fa-circle')
                .addClass('fa-check-circle');
        }
    });

    // remove the focus, if it is on by default
    $this.blur();
    $('[data-informer-id=' + $informer_id + '] i.fa')
        .addClass('fa-circle')
        .removeClass('fa-check-circle');
});

Why that happens if I catch an object with var $this = $(this);?

Live example: http://jsfiddle.net/ynts/M9pZN/

Answer 1

The problem is in your variables. You've missed keyword var so your variables are global

var $placeholder = $this.attr('data-placeholder');
$placeholder = $placeholder.replace(/\<br>/g, "\n");
var $informer_id = $this.attr('data-informer-link');

upd: unnecessary var removed