JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sentence" class="wp-one wp-two wp-small">fdgbfbfnghn</div>

<button id="button">CHANGE CLASS</button>

CSS

.wp-small{
 color: #f00;   
}
.wp-medium{
 color: #0f0;   
}
.wp-large{
    color: #00f;
}

JavaScript

$(document).ready(function(){
    var size = ['small', 'medium', 'large'],
        button = $("#button"),
        sentence= $("#sentence"),
        i = 0;
    
    button.click(function(){
        sentence.removeClass("wp-"+size[i]);
        (i == size.length - 1) ? i = 0 : i++;
        sentence.addClass("wp-"+size[i]);
    });
});