JSFiddle - React, Tailwind, and code Playground

HTML

<div class='cell'><div class='enquiry-button'>Show form</div></div>
<div class='cell'><div class='enquiry-button'>Show form</div></div>
<div class='cell'><div class='enquiry-button'>Show form</div></div>

CSS

.cell {
    border: 1px solid red;
    margin: 10px auto;
    width: 300px;
}
form {
    height: 0;
    overflow: hidden;
    -webkit-transition: all .5s;
    transition: all .5s;
}
.opened form {
    height: 50px;
}
.enquiry-button {
    background: blue;
    color: white;
    padding: 10px;
    text-align: center;
}

JavaScript

$(".enquiry-button").click(function (e) {
    var $this = $(this),
        $parent = $this.parent();
    
        if (!$parent.hasClass('opened')) {
    
            if (!$parent.find('form').length) {
                $parent.append('<form>Input: <input type="text"/></form>');
            }
            
            $parent.addClass('opened');
        } else {
            $parent.removeClass('opened');
        }
});