JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="myClick">add</div>
  <div id="boxText"></div>
</div>

CSS

.box{
  width: 100%;
  height: 100px;
  background-color: #B0C4DE;
  display: flex;
  align-items: center;
}
.myClick{
  margin: 0 1rem;
  border-radius: 5px;
  padding: .5rem;
  background-color: #FFE4E1;
  cursor: pointer;
}

JavaScript

var t = true;
var checkClick = 0;
$('.myClick').click(function(){ 
  if($('#boxText').text().length){
  	$('#boxText').text('');
  }
  else{
  	$('#boxText').text('hello my friend');
  }
  checkClick = 1;
});

$('.box').click(function(){
  if(checkClick == 0) {

	if(t){
  	$(this).css('backgroundColor', '#FFC0CB');
  }
  else{
  	$(this).css('backgroundColor', '#00FF7F');
  }
	t = !t;
  } 
  checkClick = 0; 
});