Please tell me how to repeat this process in JS?

Clicking 5 times on the light switch makes a chicken come out and an alert pop ups, after clicking the 5th time, the counter just keeps on adding and it doesnt restart. You probably already know my question, how do i make it restart the process each 5th click? I just want it do the same thing every 5 clicks...

This is the code below and here is the website for reference..www.deko.live Help would be appreciated very much.

var flip = false;
var counter = 0;
function flipSwitch() {
    var themeColor = "#EEE8AA";
    var bright = "brightness(100%)";
    var lightS = "rotate(0deg)";
    var word = "PALI";
    var wordColor = "black"
    if (flip) {
        themeColor = "#EEE8AA";
        bright = "brightness(100%)";
        lightS = "rotate(0deg)";
        word = "ON";
        wordColor = "black";
        flip = false;
        counter++;
     } else {
        themeColor = "dimGray";
        bright = "brightness(50%)";
        lightS = "rotate(180deg)";
        word = "OFF";
        wordColor = "white";
        flip = true;
        counter++;
    }
    document.getElementById("theme").style.backgroundColor = themeColor;
    document.getElementById("roger").style.filter = bright;
    document.getElementById("lightSImg").style.transform = lightS;
    document.getElementById("lightSImg").style.filter = bright;
    document.getElementById("LifeOrDeath").innerHTML = word;
    document.getElementById("LifeOrDeath").style.color = wordColor;
    document.getElementById("counter").innerHTML = counter;
    surprise();
}

function surprise() {

     if (counter === 5) {
        document.getElementById("roger").src = "https://vignette.wikia.nocookie.net/spongebob/images/0/00/Roger_the_chick.png/revision/latest?cb=20141201044139"
        document.getElementById("counter").innerHTML = "Surprise!"
        alert("WHOAA!!")
        }
}