JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post">
            <input type="hidden" name="post_id" value="{{ p.key.id() }}">
            <input type="hidden" name="user_id" value="{{ user.key.id() }}">
            <input type="button" name="reply" id="test" value="Reply">
        </form>

JavaScript

$("#test").click(function() {

                var reply = $("<textarea name='reply_content' style='resize: none; width: 550px; height: 100px;'></textarea><br><input type='submit' name='reply' value='Reply'><input type='submit' id='cancel_btn' value='Cancel'>")

                $("#test").replaceWith(reply);

            });

            $("#cancel_btn").click(function() {

                var cancel = $("<input type='button' name='reply' id='{{ p.key.id() }}'' value='Reply'>");

                $("#test").replaceWith(cancel);

            });