JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="clickme">click me fast</div>
<div class="testsubject">how do i stop it playing over and over if you click alot</div>

CSS

.testsubject {
  width: 200px;
  height: 200px;
  background-color: blue;
  color: white;
}

.clickme {
  width: 60px;
  height: 50px;
  margin-bottom: 20px;
  background-color: red;
  text-align: middle;
  cursor: pointer;
}

.clickme:hover {
  color: white;
  background-color: green;
}

JavaScript

var clicked = false;
var doing = false;

$(".clickme").click(function(e) {
  if (doing) {
    return;
  } else {
    doing = true;
  }
  doing = true;
  clicked = !clicked;
  if (clicked) {
  	$('.testsubject').fadeOut(700, function() {
  		doing = false
  	});
  } else {
 		$('.testsubject').fadeIn(700, function() {
   		doing = false;
  	});
  }
});