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="testReply" value="Reply">
        </form>

JavaScript

var originalState;            

			$("form").on('click','#testReply', function() {
					originalState = $("form").html();
          var reply = $("<textarea name='reply_content' style='resize: none; width: 550px; height: 100px;'></textarea><br><input type='button' name='reply' value='Reply'><input type='button' id='cancel_btn' value='Cancel'>")

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

      });

      $("form").on('click','#cancel_btn', function() {
 							$("#cancel_btn, #testReply, textarea[name='reply_content']").remove()
              $("form").html(originalState);
      });