so I am using Jquery to try and change bootstrap buttons classes when I click on them using the toggleClass but the problem is I only can toggle between only 2 classes and that not what I want, I want to toggle between at least 5 classes or even more each time I click on the button, but I can’t find a way to do it
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>toggle</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<script>
$(document).ready(function () {
$("button").click(function () {
$(this).toggleClass("btn btn-success btn btn-info btn btn-primary");
});
});
</script>
<style>
#p {
position: absolute;
top: 50%;
left: 50%;
}
</style>
<body>
<button id="p" class="btn btn-success">Random button</button>
</body>
</html>