JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body" class="imageOne"></div>

CSS

html, body, #body {
    height: 200px;
    width: 300px;
}

#body.imageOne {
    background-image: url("http://lorempixel.com/300/200/sports/1");
}

#body.imageTwo {
    background-image: url("http://lorempixel.com/300/200/sports/2");
}

#body.imagethree {
    background-image: url("http://lorempixel.com/300/200/sports/3");
}

#body.4 {
    background-image: url("http://lorempixel.com/300/200/sports/4");
}

#body.5 {
    background-image: url("http://lorempixel.com/300/200/sports/5");
}

JavaScript

var bodyObj, className, index;

bodyObj = document.getElementById('body');
index = 1;
className = [
    'imageOne',
    'imageTwo',
    'imagethree',
    '4',
    '5'
];

function updateIndex(){
    while (index < 4) {
      	index++;
    }
} index = 0;
	

bodyObj.onclick = function(e){
    e.currentTarget.className = className[index];
    updateIndex();
}