JSFiddle - React, Tailwind, and code Playground

HTML

<li class="productEnquiry">
	<a id="enquire_product_button" href="#enquire_product_form">{l s='Ask a question about this product' mod='productenquiry'}</a>
</li>

<div style="display: none;">
	<div id="enquire_product_form">
			<h2 class="title">{l s='Send your question about this product' mod='productenquiry'}</h2>
                        <div style="clear: both"></div>
			<div class="product clearfix">
				<img src="{$link->getImageLink($enquire_product->link_rewrite, $enquire_product_cover, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$enquire_product->name|escape:html:'UTF-8'}" />
				<div class="product_desc">
					<p class="product_name"><strong>{$enquire_product->name}</strong></p>
					{$enquire_product->description_short}
				</div>
			</div>
			
			<div class="product_enq_form_content">
                            <form action="" method="get" id="penq" />
				<div id="product_enq_form_error"></div>
				<div class="form_container">
					<p class="intro_form">{l s='Fill all fields to send a question about this product. Thanks' mod='productenquiry'} :</p>
					<p class="text">
						<label for="name">{l s='Your Name' mod='productenquiry'} <sup class="required">*</sup> :</label>
						<input name="action" type="hidden" value="productEnquiry"/>
						<input name="secure_key" type="hidden" value="{$ep_secure_key}"/>
						<input id="your_name" name="name" type="text" value=""/>
					</p>
					<p class="text">
						<label for="email">{l s='Your Email' mod='productenquiry'} <sup class="required">*</sup> :</label>
						<input id="your_email" name="email" type="text" value=""/>
					</p>
	
				<p class="text">
						<label for="friend_email">{l s='Fill toyr question' mod='productenquiry'} <sup class="required">*</sup> :</label>
                                                <textarea id="comment" name="comment" ></textarea>
					</p>	
                                        <p class="txt_required"><sup class="required">*</sup>...

JavaScript

{literal}
$('document').ready(function(){
	$('#enquire_product_button').fancybox({
		'hideOnContentClick': false
	});

	$('#enquireProduct').click(function(){
		var datas ='';
		var name=$('#your_name').val();
		var email=$('#your_email').val();
		

		function validateEmail(email) { 
			var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
			return re.test(email);
		}  
		
		if(name=='')datas +='Please write your name';
		if(email=='' || validateEmail(email)==false)datas +='<br/>Please write correct email address';
                //console.log(datas);
		if (datas == '')
		{
			$.ajax({
				{/literal}url: "{$module_dir}productenq_ajax.php",{literal}
				post: "POST",
				data: $('#penq').serialize(),
				dataType: "json",
				success: function(result){
                            
				}
			});	$.fancybox("THANK YOU, YOUR MESSAGE HAS BEEN SENT"); $.fancybox.close();
		}
		else{ 
			$('#product_enq_form_error').html(datas);
                        }
	});
});
{/literal}