Using multiple identifiers in jquery

Question

I made a small jquery script to check if the input field value is greater than 5. but I have 2 tags with 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 the first tag <a id="first"></a>. Second tag not showing

Answer 1

You just need to change <a>to using 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 use are:

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

Search <a>with the class. If you tried to search <a>with an identifier, they should be as follows:

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

Answer 2

, , ,

Answer 3

I agree that it does not have duplicate identifiers. Easier to track and cleaner code. My two cents :), after recently I had to reorganize a piece of code that had a duplicate identifier that did not work in IE. Lesson learned!