JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div class="border1"></div>
<div>I'm not affected, click me!</div>

CSS

div { height: 100px; border: solid 1px #ddd; }
.border1 { border: solid 1px red; }
.border2 { border: solid 1px green; }
.border3 { border: solid 1px blue; }
.border4 { border: solid 1px orange; }

JavaScript

var classes = ['border1', 'border2', 'border3', 'border4'];
$("div[class*='border']").click(function() {
    for(var i=0; i<classes.length; i++) {
        if($(this).hasClass(classes[i])) {
            $(this).removeClass(classes[i]).addClass(classes[(i+1)%classes.length]);
            break;
        }
    }
});