JSFiddle - React, Tailwind, and code Playground

by jcutrell

HTML

<div class="comment">Some comment!<a href="#" class='reply'>Reply</a></div>
<form action="somephpfile.php" method="POST">
<textarea></textarea>
<input type="submit" class="submitbutton">
</form>
<div class="comment">Some comment!<a href="#" class='reply'>Reply</a></div>
<form action="somephpfile.php" method="POST">
<textarea></textarea>
<input type="submit" class="submitbutton">
</form>
<div class="comment">Some comment!<a href="#" class='reply'>Reply</a></div>
<form action="somephpfile.php" method="POST">
<textarea></textarea>
<input type="submit" class="submitbutton">
</form>

JavaScript

(function($){
    $(".comment").next("form").hide();
    
    $(".reply").on("click", function(e){
        e.target.innerHTML = (e.target.innerHTML == "Reply") ? "Close" : "Reply";
      var form = $(e.target).parent().next("form");
      form.toggle();
      form.on("submit", function(e){
          e.preventDefault();
          var args = form.serialize(),
              url = form.attr("action");
          $.post(url,args).complete(function(data){console.log(data)});
      });
    });
    
})(jQuery);