JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
	<html>
		<head>
		<meta name="robots" content="noindex,nofollow" />
	<!--
	Importing:
	-->

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script>
			
			function afterWaiting()
			{
				$("#rollButton").css("color","black");
				$("#rollButton").click(function(){calculation()});
            //document.getElementById("rollButton").onclick=function(){calculation()};
				
			}

			var counter=0;
			function calculation()
			{
				
				////Enforcing wait:
				document.getElementById("rollButton").style.color="red";
				document.getElementById("rollButton").onclick="";
				window.setTimeout("afterWaiting()",2000);
				
				
				counter=counter+1;
				document.getElementById("test").innerHTML=counter;
			
				}

				

		</script>
		
		</head>
	<body>

	  <button type="button" onclick="calculation()" id="rollButton"> Roll! </button>
	  
	<p id="test"> </p>


	</body>
	</html>