Characters counter sign in textarea 2

HTML

<div class="foo">
    <textarea maxlength="20" id="comment_content"></textarea>
    <span class="compteur"></span>
</div>

<div class="foo">
    <textarea maxlength="20" id="comment_content2"></textarea>
    <span class="compteur"></span>
</div>

<input type="submit" value="Commenter">

CSS

body {
    padding: 20px;
}

textarea {
    z-index: 5;
    height: 58.5px;
    width: 550px;
    max-width: 550px;
    padding: 6px 80px 6px 10px;
    background-color: #F5F8F9;
    border: 1px solid #EAEAEA;
    border-bottom-width: 0;
    font: 13px/1.5em "Lucida Grande", "Helvetica Neue", sans-serif;
    color: #535353;
    outline: none;
    overflow: hidden;
}

.foo {
    position: relative;
    display: inline;
}

.foo .compteur {
    position: absolute;
    z-index: 10;
    bottom: 7px;
    right: 10px;
    font: bold 40px/1 "Helvetica Neue", sans-serif;
    color: rgba(0,0,0,.2);
}

.negatif {
    color: rgba(255,0,0,.4) !important;

}

.warning {
    color: rgba(255,120,0,.4) !important;

}

input[type="submit"] {
    display: block;
    margin-top: 5px;
    padding: 0 6px;
    border: 1px solid #CFDADF;
    height: 27px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 13px;
    color: #94A5AD;
    text-align: center;
    text-shadow: 0 1px 0 #FAFAFA;
    cursor: pointer;
    /* Gradient */
    background: -webkit-linear-gradient(top, #F1F2F2, #E6E8E9);
    background: -moz-linear-gradient(top, #F1F2F2, #E6E8E9);
    background: -o-linear-gradient(top, #F1F2F2, #E6E8E9);
    background: -ms-linear-gradient(top, #F1F2F2, #E6E8E9);
    background: linear-gradient(top, #F1F2F2, #E6E8E9);
}

input[type="submit"]:hover,
input[type="submit"]:focus {
    color: #7B8A92;
    /* Gradient */
    background: -webkit-linear-gradient(top, #f1f2f2, #ddd);
    background: -moz-linear-gradient(top, #f1f2f2, #ddd);
    background: -o-linear-gradient(top, #f1f2f2, #ddd);
    background: -ms-linear-gradient(top, #f1f2f2, #ddd);
    background: linear-gradient(top, #f1f2f2, #ddd);
}

textarea,
input[type="submit"] {
    /* Border radius */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

JavaScript

//Counter color will change at the end.

$(document).ready(function() {

    var commentLength,
        caractRestant,
        $classCompteur = $('.foo .compteur'),
        nbreCaract,
        idTextarea = document.getElementById('comment_content'),
        tpsAnimation = 500;

    //Animation textarea
    $classCompteur.hide();

    $('.foo textarea')
        .css('height', 19.5)
        
        .focus(function() {
            $(this).animate({ height: 19.5 * 3 }, tpsAnimation);
            setTimeout(function() {
                $classCompteur.fadeIn(tpsAnimation);
            }, tpsAnimation / 2);
            })
        
        .blur(function() {
            if (idTextarea.value == '') {
                $classCompteur.fadeOut(tpsAnimation / 2);
                $(this).animate({ height: 19.5 }, tpsAnimation);
            }
        });

    //Compteur de caractères
    nbreCaract = idTextarea.getAttribute('maxlength');
    idTextarea.removeAttribute('maxlength'); //Note 1
    $classCompteur.text(nbreCaract);

    function Compter() {

        commentLength = idTextarea.value.length;
        caractRestant = nbreCaract - commentLength;
        $classCompteur.text(caractRestant);
                         
        if( caractRestant <= 15 && caractRestant >= 0 ) {
            $classCompteur
                .removeClass('negatif')
                .addClass('warning');
        } else if( caractRestant < 0 ) {
            $classCompteur
                .removeClass('warning')
                .addClass('negatif');
        } else { $classCompteur.removeClass('negatif warning'); }

    }
    
    idTextarea.onkeyup = Compter;
    idTextarea.onkeydown = Compter;

    //Bloquer l'envoi si surplus de caractères
    $('input[type="submit"]').click(function() {
        if (caractRestant < 0) {
            alert('Commentaire trop long.'); //A remplacer par des effets plus jolis
            return false;
        }
    });

});

/*
NOTE 1 - Si JS est activé, l'attribut...