JSFiddle - React, Tailwind, and code Playground

HTML

<div class='cell'>
    <div class='enquiry-button'>Enq1</div>
</div>
<div class='cell'>
    <div class='enquiry-button'>Enq2</div>
</div>
<div class='cell'>
    <div class='enquiry-button'>Enq3</div>
</div>

JavaScript

$( ".enquiry-button" ).click( function(e) {
    
    e.preventDefault();
    e.stopPropagation();
    alert("length::"+$(this).parents('.cell').find('form').length);
    if($(this).parents('.cell').find('form').length==0){
        $(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("fast");
    }
    
});