using multiple id in jquery

Question

I made little jquery script for checking if input box value bigger than 5 .but I have 2 tag with an id and only one of them works.

<div id="register">
    <form id="register">
<input id="first" type="text" /> <a id="first" ></a> <br />
    <input id="second" type="text" /> <a id="second" ></a>

</form>

$('input').keyup(function(){
if($(this).val().length<5)
   {
  $('a.first').text("Please fill"); 
   }
if($(this).val().length<5){
     $('a.second').text("Please fill"); 
   }
});

But it shows only first <a id="first"></a> tag. Second tag not visible

Answer 1

You just need to change your <a>'s to use classes:

<div id="register">
    <form id="register">
       <input id="first" type="text" /> <a class="first" ></a> <br />
       <input id="second" type="text" /> <a class="second" ></a>
    </form>
</div>

The jQuery selectors you're using:

$('a.first')
$('a.second')

Are looking for an <a> with a class. If you were trying to look for an <a> with an id, they would need to be as follows:

$('a#first')
$('a#second')

Answer 2

Agreed with not having duplicate id's. Easier to keep track of, and cleaner code. My two cents :), after having to refactor a chunk of code at work recently that had duplicate id's that failed to work in IE. Lesson learned!

Answer 3

change the ID of register , its not correct to have two identical ID's in the same page , after that everything should be working fine

cheers