JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pop" id="pop1"><h1>1 <br> click me </h1></div>
<div class="pop" id="pop2"><h1>2<br> click me </h1></div>
<div class="pop" id="pop3"><h1>3<br> click me </h1></div>

CSS

.pop{
  width: 150px;
  height: 150px;
  float: left;
  cursor: pointer;
  margin: 35px;
}

#pop1 { background: #2ecc71; }
#pop2 { background: #3498db; display: none;}
#pop3 { background: #9b59b6; display: none;}

h1{
  color: #fff;
  text-align: center;
}

JavaScript

(function ($) {
	"use strict";
  var checkPOP2 = false;  
  
  $("#pop1").click(function(){
    $(this).css("display", "none");
    $("#pop2").css("display", "initial");
  });
  
  $("#pop2").click(function(){
    if(!checkPOP2){
      $(this).css("display", "none");
      $("#pop3").css("display", "initial");
      checkPOP2 = true;
    }
    
    else if(checkPOP2){
      $(this).css("display", "none");
      $("#pop1").css("display", "initial");
      checkPOP2 = false;
    }
  });
  
  $("#pop3").click(function(){
    $(this).css("display", "none");
    $("#pop2").css("display", "initial");
  });
  
})(jQuery)