JSFiddle - React, Tailwind, and code Playground

HTML

<div class="p_change" tabindex="0" id="1">
  <div class="pr_icon first_click"><div class="icon-kr icon-globe"></div>CLICK</div>
   <div class="pr_type first_click_content">
     <div class="type_s change_pri md-ripple" data-id="0"><div class="icon-pr icon-globe"></div>1</div>
     <div class="type_s change_pri md-ripple" data-id="1"><div class="icon-pr icon-contacs"></div>2</div>
     <div class="type_s change_pri md-ripple" data-id="2"><div class="icon-pr icon-lock-1"></div>3</div>
  </div>
</div>

<div class="p_change" tabindex="0" id="2">
  <div class="pr_icon "><div class="icon-kr icon-globe"></div>CLICK</div>
   <div class="pr_type second_click_content">
     <div class="type_s change_pri md-ripple" data-id="0"><div class="icon-pr icon-globe"></div>1</div>
     <div class="type_s change_pri md-ripple" data-id="1"><div class="icon-pr icon-contacs"></div>2</div>
     <div class="type_s change_pri md-ripple" data-id="2"><div class="icon-pr icon-lock-1"></div>3</div>
  </div>
</div>

CSS

.p_change{
  float:left;
  z-index: 1;
  outline: 0;
  position:relative;
    margin:10px;
}
.pr_icon{
	float:left;
    padding:10px;
    background-color:red;
	}
.p_change:before {
	content: "";
  outline: 0;
  margin-top:10px;

}
.p_change:focus .pr_type {
	opacity: 1;
	visibility: visible;
	transition: all .3s ease-out;
  -webkit-animation: zoomIn 0.3s ease-in-out 0.3s;
  animation: zoomIn 0.3s ease-in-out 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.p_change.no-pointer-events {
	pointer-events: auto !important;
}
.p_change.no-visibility .pr_type {
	visibility: visible !important;
	display: none;
}
.p_change.no-visibility:focus .pr_type {
	display: block;
}

.p_change.no-opacity .pr_type {
	opacity: 1 !important;
}
.pr_type {
	pointer-events: auto;
	position: absolute;
	z-index: 1;
    width:150px;
    height:auto;
	margin-top:32px;
	padding-top:0px;
	padding-bottom:0px;
    background-color:#e0f2f1;
	opacity: 0;
	visibility: hidden;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.type_s{
	float:left;
	position:relative;
	width:100%;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	font-weight:400;
	font-size:13px;
	color:#004d40;
	font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
	line-height:32px;
	cursor:pointer;
	}
.type_s:hover{
	background-color:#80cbc4 !important;
	}

JavaScript

$(document).ready(function() {
$('.pr_icon').on('click',function(e){
	// Change Post Privacy
if($(this).attr('class')== 'pr_icon first_click'){
$('.first_click_content').children().show();

}
   else{
$('.second_click_content').children().show();                                 
   }  
                                    });                                     
	$('.change_pri').on('click',function(event){
                     $(this).closest('.pr_type').children().hide();
		event.stopPropagation();
      var dataid = $(this).attr('data-id');
      var id = $(this).closest('.p_change').attr('id');
	  var class_name = $(this).find(".icon-pr").attr("class");
      class_name = class_name.replace(/icon\-pr\s+/gi, "");
      $(this).closest(".p_change").find(".icon-kr").removeClass().addClass("icon-kr " + class_name);
      $.ajax({
           type: "POST",
           url: "change_id.php",
           data: { dataid : dataid, id: id }
           }).success(function(html){
            if (html.trim() === "1") {
			   // Do Something
             } else {
			 swal({   title: "Invalid report selection!",   text: ":o",   timer: 4000 });
			 }
           });
});
});