contador de caracteres dinámico JQuery

<!DOCTYPE html>
<html>
    <head>
        <title>Contador de caracteres</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js" ></script>
        <style>
            #contador{
                height: 10px;
                width: 0px;
                position: absolute;
                display: none;
                background: green;
                border-radius: 5px;
            }
            #porcentaje{
                width: 50%;
                height: 100%;
                background: red;
                border-radius: 5px;
            }
        </style>
        <script>
        $(document).on("ready", function(){
            //ELEMENTOS DEL CONTADOR
            //PARTE VERDE
            var contador = $("<div/>").attr("id", "contador").appendTo("body");
            //PARTE ROJA
            var porcentaje = $("<div/>").attr("id", "porcentaje").appendTo(contador);
           $("textarea").on("click mouseover focus", function(){
               //OPERACIONES DEL CONTADOR
               var maxlength = $(this).attr("maxlength");
               var total_letras = $(this).val().length;
               var cantidad_porcentaje = (total_letras * 100)/ maxlength;
               contador.find("#porcentaje").css("width", cantidad_porcentaje+"%");
               var ancho = $(this).width();
               var posicion_contador = $(this).offset().top + $(this).height() + 5;
               contador.css({
                   "top":posicion_contador,
                   "width":ancho
               }).fadeIn("fast");
           }).on("keyup", function(){
               //OPERACIONES DEL CONTADOR
               var maxlength = $(this).attr("maxlength");
               var total_letras = $(this).val().length;
               var cantidad_porcentaje = (total_letras * 100)/ maxlength;
               contador.find("#porcentaje").animate({
                   "width": cantidad_porcentaje+"%"},
                    {
                        duration:"fast",
                        queue:false
                    });
           });
        });
        </script>
    </head>
    <body>
        <textarea rows="10" cols="20" maxlength="20">maxlength 20</textarea><hr/>
        <textarea rows="10" cols="40" maxlength="40">maxlength 20</textarea><hr/>
        <textarea rows="10" cols="60" maxlength="60">maxlength 20</textarea><hr/>
    </body>
</html>