Making buttons to change tab in a Nav-tabs Bootstrap type menu

Question

Right now, I have the code to follow: https://pastecode.xyz/view/3f023c9b

The following Javascript code is intended to make the buttons with the letters "Previous" and "Continue", respectively, return and advance a tab. But when you click, nothing happens.

<script type="text/javascript">
    function prox(){
        $('.nav-tabs').find('.active').next('li').find('a').trigger('click');
    }
    $('#btnA').click(function(){
        $('.nav-tabs').find('.active').prev('li').find('a').trigger('click');
    })
</script>

The buttons:

<div class="text-right">
    <button type="submit" class="btn btn-primary" onclick="prox()">Salvar e Continuar</button>
    <button type="button" class="btn btn-outline-secondary" id="btnA">Anterior</button>
</div>

Answer 1

Change the event:

$('#btnP').onclick(function(){
 $('.nav-tabs').find('.active').prev('li').find('a').trigger('click');
})

for...

$('#btn').click(function(e){
   e.preventDefault(); // evita o submit
   $('.nav-tabs li a.active') // busca o <a> ativo
   .closest("li") // busca o <li> pai do <a> ativo
   .next(".nav-item") // seleciona o próximo <li>
   .find("a") // busca o <a> do próximo <li>
   .trigger('click'); // dispara o clique
});

Where #btn is the id button Load and continue and you need to select the link parent <a> to select the next link <a> within the next <li>.

The e.preventDefault(); prevents the page from being reloaded by submit.