Currently, I am experimenting with Jquery to dynamically change the classes of bootstrap buttons when they are clicked. However, I have encountered a limitation while using toggleClass. The issue is that I am only able to toggle between two classes, which is not what I intended. My goal is to cycle through at least 5 different classes (or even more) each time the button is clicked. Unfortunately, I have been unable to find a solution to achieve this desired functionality.
<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>