On button click how to change focus

Question

I have a html page with n numbers of anchor tags throught the body and a button tag

<input type="button" value="Next" id="btn1">
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....  <br>
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a id="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>

The id attribute of all anchor tags is same Now i just want that when clicking on button the focus on anchor tags should get change one by one for this i have tried this jquery code but the focus is not changing from first tag

$("#btn1").on("click", function () {
    $(this).next("#abc1").focus();
 });

if possible the solution would need to be based using Javascript and not something like JQuery.

Any help greatly appreciated

Answer 1

ID Should be unique your html is Invalid

Try class of same name instead of id of same name

Use this html:

<input type="button" value="Next" id="btn1">
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....  <br>
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>
<a class="abc1" href=""><mark style="background:red">john</mark></a> is brilliant human.....<br>

Jquery:

$("#btn1").on("click", function () {
    $(this).next(".abc1").focus();
 });

DEMO

Complete Working snippet:

---

var pos = 0;
$("#btn1").on("click", function () {
    $('a').closest(".abc1").eq(pos).focus();
    pos = (pos<4)?++pos:0;
 });

Updated DEMO

Answer 2

If you are working with id's, they should be unique so you need to use class for same names. change

$("#btn1").on("click", function () {
    $(this).next("#abc1").focus();
 });

to

$("#btn1").on("click", function () {
    $(this).next(".myNiceClass").focus();
 });

and give a class name to your holder html element. I assume you are storing your texts in a tag, so it should be

Change

<a id="abc1">

to

<a class="myNiceClass">

That's easy

Answer 3

These answers actually won't work for the end game of what you're attempting...

Each one has the right thought process, but really you need to adjust their code to actually achieve what you're wanting.

The code provided by other answers will go to the next class element FROM the button. You want from given class (ie first class, the second class... etc).

$('#btn1').on("click",function(){
   var cur = $(this).next(".focused");
   if(cur.length > 0){
      cur.removeClass("focused").next(".abc1").focus().addClass("focused");
   }else{
      $(this).next("abc1").focus().addClass("focused");
   }
});

Do all the other stuff to change the classes... @Manwal uses a very well structured code set.