currently working on a project where I have lots of text I decided to put each paragraph onto a panel (DIV), they are all on top of each other, when you click on a the div it disappears (in the CSS the panel moves to -100% of screen) and then we can see the next div etc. and this goes on and on. but my problem is when I arrive at the last div I have a blank page after and have no way of going back except for refreshing the page which is not very ideal. So I was wondering if there was a system to make a loop that makes me go through all the divs (data-target=".panel-1",-2,-3-,4 etc.) and at the last one brings me back to the first div, so it makes a proper rotation.

In the example below I only put two panels, but there are much more. What would be the simplest way to do this? Thanks a lot!

JQuery

$(document).ready(function () {
    grade();
});


function grade() {
    $(".grade").on("click", function () {
        var target = $(this).attr('data-target');
        // console.log(1);
        $(target).addClass('off');
    });
}
.panel {
    position: fixed;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: left 0.8s ease-in-out;
}

.panel.off {
    left: -100%;
}

.panel-content {
    height: 100%;
    overflow: auto;
}

.panel-1 {
    width: 100%;
    background-color: blue;
    z-index: 1100;
}

.panel-2 {
    width: 100%;
    background-color: yellow;
    z-index: 1000;
}
<div data-target=".panel-1" class="panel panel-1 grade">
    <div class="panel-content">
       <h3>What is the concept of the project?</h3><br>
           <p>Text</p>
    </div>
</div>
 <div data-target=".panel-2" class="panel panel-2 grade">
    <div class="panel-content">
       <h3>What is the aim of the project?</h3><br>
           <p>Text</p>
    </div>
</div>