JSFiddle - React, Tailwind, and code Playground

HTML

<div class="resources">
    <a id='a1' href="url1"></a>  
    <a id='a2' href="url2"></a>  
    <a id='a3' href="url3"></a>  
    <a id='a4' href="url4"></a>    
</div>

/* index -= 1 */
<div class="link open-prev">click previous link</div> 
/* indexed [0] */
<div class="link open-current-link">click default link</div> 
/* index += 1 */
<div class="link open-next">click next link</div>

CSS

body {
    color: #fff;
}

.link { 
    width: 180px;
    height: 20px;
    padding: 10px;
    background-color: black;
    cursor: pointer;
    text-align: center;
}

JavaScript

/* get urls and store in an array */ 
var links = $( '.resources a[href*="url"]' );

var currentLink = 0;

/* click and open default link ! */ 
$('.open-current-link').on('click', function(){ 
    $( links[currentLink] ).click();        
});

/* click and open next link */ 
$('.open-next').on('click', function(){  
    currentLink = currentLink + 1;
    if (currentLink == 4){
        currentLink = 0;
    }
    alert('clicking ' + $(links[currentLink]).attr('href'));
    $( links[currentLink] ).click();        
});

/* click and open previous link */
$('.open-prev').on('click', function(){
    currentLink = currentLink - 1;
    
    if (currentLink == -1){
        currentLink = 3;
    }
    
    alert('clicking ' + $(links[currentLink]).attr('href'));
    $( links[currentLink] ).click();      
});