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