JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <ul>
    <li><a href="http://www.google.com.br/" target='_blank' class='' id="link1"> Link habilitado </a></li>
    <li><a href="http://www.google.com.br/" target='_blank' class='disabled' id="link2"> Link habilitado </a></li>
    <li><a href="http://www.google.com.br/" target='_blank' class='disabled' id="link3"> Link habilitado </a></li>
    <li><a href="http://www.google.com.br/" target='_blank' class='disabled' id="link4"> Link habilitado </a></li>
    <li><a href="http://www.google.com.br/" target='_blank' class='disabled' id="link5"> Link habilitado </a></li>
  </ul>
  <div>

CSS

/* serve só para estilizar o link */

.disabled {
  text-decoration: none;
  color: gray;
  cursor: default;
}

JavaScript

//para tudo que o id comece com "link"
$('[id^=link]').click(function() {
  //verifica se tem a classe disabled
  if (!$(this).hasClass('disabled')) {
    //pegamos o id atual
    var id = $(this).attr('id');
    //damos split para pegar o numero
    var linknumber = id.split('link');
    //somamos o número + 1
    var nextLink = '#link'.concat(parseInt(linknumber[1]) + 1);

		//removemos a classe do próximo
    $(nextLink).removeClass('disabled');
    //adicionamos nele
    $(this).addClass('disabled');
  }
  //se tiver não faz nada
  else {
    return false;
  }
});