JSFiddle - React, Tailwind, and code Playground

HTML

<span class="view_data" id="5">Open modal 1</span>


	<div id="modal" class="modal" data-modal="empdetail">
		<div class="modal-inner">
			<div class="modal-heading">
				<a class="modal-close" data-modal-close="empdetail" href="#">x</a>
				<h4 class="modal-title">Detalle producto</h4>
			</div>
			<div class="modal-body" id="product_detail"></div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-modal-close="empdetail">Cerrar</button>
			</div>
		</div>
 	</div>

CSS

.modal {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	outline: 0;
	overflow-x: hidden;
	overflow-y: auto;
	background: rgba(0,0,0,0.2);
	display: none;
	align-items: center;
	z-index: 1;
}
.modal-inner {
	padding: 1em;
	width: 50%;
	position: relative;
	margin: 0 auto;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #fff;
}
h4.modal-title {
	padding: 1em;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.5em;
}
.modal-close {
	width:30px;
	height:30px;
	padding-top:4px;
	display:inline-block;
	position:absolute;
	top:0px;
	right:0px;
	transition:ease 0.25s all;
	-webkit-transform:translate(50%, -50%);
	transform:translate(50%, -50%);
	border-radius:1000px;
	background:rgba(0,0,0,0.8);
	font-family:Arial, Sans-Serif;
	font-size:20px;
	text-align:center;
	line-height:100%;
	color:#fff;
}
.modal-close:hover {
	-webkit-transform:translate(50%, -50%) rotate(180deg);
	transform:translate(50%, -50%) rotate(180deg);
	background:rgba(0,0,0,1);
	text-decoration:none;
}
.view_data, .edit_data {
    cursor: pointer;
}
.view_data:hover, .edit_data:hover {
    color:red;
}

JavaScript

$(function() {
	//----- OPEN
	$('[data-modal-open]').on('click', function(e){
		$('#insert_form')[0].reset();
		var targeted_modal_class = jQuery(this).attr('data-modal-open');
		$('[data-modal="' + targeted_modal_class + '"]').fadeIn(350);
		e.preventDefault();
	});

	//----- CLOSE
	$('[data-modal-close]').on('click', function(e)  {
		var targeted_modal_class = jQuery(this).attr('data-modal-close');
		$('[data-modal="' + targeted_modal_class + '"]').fadeOut(350);
		e.preventDefault();
	});

	$('#add').click(function(){
		$('#product_id').val("");
		$('#insert').val("Insert");
		$('#insert_form')[0].reset();
	});

	$(document).on('click', '.edit_data', function(){
		var product_id = $(this).attr("id");
		$.ajax({
			url:"file.php",
			method:"POST",
			data:{product_id:product_id},
			dataType:"json"})
		.done(function(data){
			$('#image').val(data.image);
			$('#title_menu').val(data.title_menu);
			$('#title').val(data.title);
			$('#sub_title').val(data.sub_title);
			$('#detail').val(data.detail);
			$('#type_service').val(data.type_service);
			$('#main_cover').val(data.main_cover);
			$('#active').val(data.active);
			$('#product_id').val(data.id_product);
			$('#insert').val("Update");  
			$('[data-modal="add_data_modal"]').fadeIn(350);
			$("#editor").html($("#detail").val());
		}).fail(function(){
			alert( "Ajax Request fail" );
		})
	});

	$('#insert_form').on("submit", function(event){
		event.preventDefault();
		if($('#image').val() == ""){
			alert("Imagen es requerido");
		}else {
			$.ajax({
				url:"file.php",
				method:"POST",
				data:$('#insert_form').serialize(),
				beforeSend:function(){
		  			$('#insert').val("Inserting");
		  		}
			})
			.done(function(data){
				$('#insert_form')[0].reset();
				$('[data-modal="add_data_modal"]').fadeOut(350);

			})
			.fail(function( jqXHR, textStatus ) {
				//alert( "Insert ajax request fail" );
				console.log(jqXHR.responseText);//Posible Texto Error
				console.log("Request failed: " +...