JQuery validation shows error message in wrong place?

JQuery validation shows error message in wrong place?

I have a form with three text field with the same name.
If I trigger an error in any field, the error message for all other field with the same name will be shown next to the that particular field. (e.g. if I trigger errors at field 2, and correct the entry in field 2, then trigger the error in field 3, the error message for field 3 will be shown next to field 2 instead of field 3)

Is it a bug? or just a designed behaviour? How can I change it?
I am using jQuery 1.4.4 and JQuery validation 1.7

.
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
    <style type="text/css">
    * { font-family: Verdana; font-size: 96%; }
    label { width: 10em; float: left; }
    label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
    p { clear: both; }
    .submit { margin-left: 12em; }
    em { font-weight: bold; padding-right: 1em; vertical-align: top; }
    </style>
      <script>
      $(document).ready(function(){
        $("#commentForm").validate();
      });
      </script>
     
    </head>
    <body>
    <form class="cmxform" id="commentForm" method="get" action="">
    <p><input name="email[]" size="25"  class="required email" /></p>
    <p><input name="email[]" size="25"  class="required email" /></p>
    <p><input name="email[]" size="25"  class="required email" /></p>
    </form>
    </body>
    </html>