<div name="div-default" class="div-default">
    <?php
        echo "$name";
    ?>
</div>
<div id="div01" class="title-result active">
    <?php
        echo "Seu número de Personalidade é: $numerologia[0]";
    ?>
</div>
<div id="div02" class="title-result">
    <?php
        echo "Seu número de Destino é: $numerologia[1]";
    ?>
</div>
<div id="div03" class="title-result">
    <?php
        echo "Seu número de Lição de Vida é: $numerologia[2]";
    ?>
</div>
<div id="div04" class="title-result">
    <?php
        echo "O que sua data de Nascimento diz sobre você? $numerologia[3]";
    ?>
</div>
<div class="btm-box">
    <button  id="preview" class="change-div"></button>
    <button " id="next" class="change-div"></button>
</div>

jQuery(document).ready(function() {
    (function ($) {
        var a = $('.active').attr('id');
        //If I do not use the two conditions below, the code works partially, but don't do the loop.
        if (a == "div01") {
            $('#preview').on('click', function() {
                $('.active').removeClass('active');
                $("#div04").addClass('active');
            });

            $('#next').on('click',function() {
                $('.active').removeClass('active').next().addClass('active');
            });
        }

        if (a == "div04") {
            $('#next').on('click',function() {
                $('.active').removeClass('active');
                $("#div01").addClass('active');
            });

            ('#preview').on('click',function() {
                $('.active').removeClass('active').prev().addClass('active');
            });
        }

        $('#next').on('click',function() {
            $('.active').removeClass('active').next().addClass('active');
        });

        $('#preview').on('click',function() {
            $('.active').removeClass('active').prev().addClass('active');
        });

    })(jQuery);
});

jQuery(document).ready(function() {
    (function ($) {
        var a = $('.active').attr('id'); // a will always = div01

// next button click event
    $('#next').on('click',function() {
         var a = $('.active').attr('id');

         if (a == "div04"){
              $('.active').removeClass('active');
              $("#div01").addClass('active');
         }
         else{
              $('.active').removeClass('active').next().addClass('active');
         }
     });

$(function(){
     $('#next').on('click',function() {
          var a = $('.active').attr('id');

          if (a == "div04"){
               $('.active').removeClass('active');
               $("#div01").addClass('active');
          }
          else{
               $('.active').removeClass('active').next().addClass('active');
          }
     });

     $('#preview').on('click',function() {
          var a = $('.active').attr('id');
          if (a == "div01"){
               $('.active').removeClass('active');
               $("#div04").addClass('active');
          }
          else{
               $('.active').removeClass('active').prev().addClass('active');
          }
     });
});

$(function(){
    var slides = $(".slide"); // gets all elements with the slide class
    $("#next").click(function(){
        var $active = $(".active");
        $active.removeClass("active");
        if($active.next(".slide").length > 0) // Check if next element exists
            $active.next(".slide").addClass("active");
        else
            $(slides[0]).addClass("active");  // Make first slide active
    });
    $("#prev").click(function(){
        var $active = $(".active");
        $active.removeClass("active");
        if($active.prev(".slide").length > 0) // check if next element exists
            $active.prev(".slide").addClass("active");
        else
            $(slides[slides.length -1]).addClass("active"); // Make last slide active
    });
});