Generating Ongoing Looping Links without Repeats using JavaScript

I am trying to create a button that sends users through a 'loop' of links, and keeps going through it anywhere, perhaps with its own 'memory'.

(REFERENCE CODE BELOW) For example, I want the first click to go to the first item, /roles/mafia, then the second click (from another tab, browser, or device) to go to the second one, /roles/doctor, and so on. When the button has been clicked six times (so the list has finished), the seventh time should loop back to the first one.

So if Bob clicks on the button with his Mac, it will take him to /roles/mafia. But then seconds later, if Jill clicks on it with her iPhone, it will link to /roles/doctor, and so forth.

Here is my JS, but this doesn't work since this is a pseudo-random system, rather than forming a loop.

<script type="text/javascript">
    var urls = [
        "/roles/mafia",
        '/roles/doctor',
        '/roles/cupid',
        '/roles/mafioso',
        '/roles/pimp',
        '/roles/detective'
    ];

    function goSomewhere() {
        var url = urls[Math.floor(Math.random()*urls.length)];
        window.location = url; // redirect
    }
</script>

And then the HTML button:

<a href="#" onClick="randLink(); return false;" class="play-btn">JOIN SERVER</a>

I am aware this won't have a quite simple solution, and I'm very new to the concept of JavaScript and memory, so any help, even just a snippet to inspire another coder to find the answer, is enough.

Thanks for any help in advance :)