jquery - working validation hint, working word counter but not working together

Question

I added a word counter to a my form's textarea... it is something like this...

<div>
  <label>About you:</label>
  <textarea id="qualification" class="textarea hint_needed" rows="4" cols="30" ></textarea>                     
  <span class="hint">explain about you</span>
  <script type="text/javascript">
    $("textarea").textareaCounter();
  </script>
</div>

My problem is when I add textaracounter() like this my validation hint is not working.. when I remover the counter function validation hint is working...

this is the jquery for hint message..

$(".hint").css({ "display":"none" });
$("input.hint_needed, select.hint_needed, textarea.hint_needed, radio.hint_needed").on("mouseenter", function() {
$(this).next(".hint").css({ "display":"inline" });
}).on("mouseleave", function() {
$(this).next(".hint").css({ "display":"none" });
});

this is for the word counter..

(function($){
    $.fn.textareaCounter = function(options) {
        // setting the defaults
        // $("textarea").textareaCounter({ limit: 100 });
        var defaults = {
            limit: 150
        };  
        var options = $.extend(defaults, options);

        // and the plugin begins
        return this.each(function() {
            var obj, text, wordcount, limited;

            obj = $("#experience");
            obj.after('<span style="font-weight: bold; color:#6a6a6a; clear: both; margin: 3px 0 0 150px; float: left; overflow: hidden;" id="counter-text">Max. '+options.limit+' words</span>');

            obj.keyup(function() {
                text = obj.val();
                if(text === "") {
                    wordcount = 0;
                } else {
                    wordcount = $.trim(text).split(" ").length;
                }
                if(wordcount > options.limit) {
                    $("#counter-text").html('<span style="color: #DD0000;">0 words left</span>');
                    limited = $.trim(text).split(" ", options.limit);
                    limited = limited.join(" ");
                    $(this).val(limited);
                } else {
                    $("#counter-text").html((options.limit - wordcount)+' words left');
                } 
            });
        });
    };
})(jQuery);

can anybody tell me what is the problem there?

Thank you..

Answer 1

http://jsfiddle.net/QD3Hn/14/ // without improvements

(function($){
    $.fn.textareaCounter = function(options) {
        // setting the defaults
        // $("textarea").textareaCounter({ limit: 100 });
        var defaults = {
            limit: 150
        };  
        var options = $.extend(defaults, options);

        // and the plugin begins
        return this.each(function() {
            var obj, text, wordcount, limited;

            obj = $(this);
            obj.next(".hint").after('<span style="font-weight: bold; color:#6a6a6a; clear: both; margin: 3px 0 0 150px; float: left; overflow: hidden;" id="counter-text">Max. '+options.limit+' words</span>');

            obj.on("keyup keydown", function() {
                text = obj.val();
                if(text === "") {
                    wordcount = 0;
                } else {
                    wordcount = obj.val().split(" ").length;
                }
                if(wordcount == options.limit) {
                    obj.next(".hint").next("#counter-text").html('<span style="color: #DD0000;">0 words left</span>');
                    limited = $.trim(text).split(" ", options.limit);
                    limited = limited.join(" ");
                    $(this).val(limited);
                } else {
                    obj.next(".hint").next("#counter-text").html((options.limit - wordcount)+' words left');
                } 
            });
        });
    };
})(jQuery);
$(document).ready( function() {
    $(".hint").css({ "display":"none" });
    $("input.hint_needed, select.hint_needed, textarea.hint_needed, radio.hint_needed").on("mouseenter", function() {
    $(this).next(".hint").css({ "display":"inline" });
    }).on("mouseleave", function() {
    $(this).next(".hint").css({ "display":"none" });
    });
        $("textarea").textareaCounter();
    });?