JSFiddle - React, Tailwind, and code Playground
HTML
<div class='cell'>
<div class='enquiry-button'>asd</div>
</div>
<div class='cell'>
<div class='enquiry-button'>asd</div>
</div>
<div class='cell'>
<div class='enquiry-button'>asd</div>
</div>
CSS
.enquiry-form {
display:none;
}
JavaScript
$(".enquiry-button").click(function (e) {
e.preventDefault();
e.stopPropagation();
if (!$(this).parents('.cell').find('form').length) {
$(this).closest('.cell').append(
"<div class='enquiry-form'>" +
"<form>" +
"Your Email: <input type='text' name='email'>" +
"First name: <input type='text' name='firstname'>" +
"<br>Last name: <input type='text' name='lastname'>" +
"<br>Contact No: <input type='text' name='lastname'>" +
"<br>Postcode: <input type='text' name='postcode'>" +
"<br>Optional Comment: <input type='textarea' name='comment'>" +
"<input type='submit' value='Submit'>" +
"</form>" +
"</div>");
$(this).closest('.cell').find(".enquiry-form:last").slideDown("slow");
} else $(this).closest('.cell').find(".enquiry-form:last").slideToggle("slow");
});