JSFiddle - React, Tailwind, and code Playground

by testtracker

HTML

<form id="statusUpdateForm" method="post" action="">
                                                    <textarea name="postText" class="input_box" placeholder="So what's on your mind?"></textarea><br/>
                                                    
                                                        <button type="submit" class="styled-button-12 sharebutton">Share</button>
                                                
</form>

<div id="posts">
    <div class="postItem">
        <div id="postContent"><p>my post</p></div>
        <ul id="comment"><li>my comment</li></ul>
<div class="comment_entry"><form method="post" action="#" ><input name="comment_content" type="text" placeholder="Leave comment" /></form></div>
    </div>
    <div class="postItem">
        <div id="postContent"><p>my post</p></div>
        <ul id="comment"><li>my comment</li></ul>
<div class="comment_entry"><form method="post" action="#" ><input name="comment_content" type="text" placeholder="Leave comment" /></form></div>
    </div>
<div>

CSS

#post{display:block;width:100%;height:auto;}
#comment{display:block;width:auto;height:auto;}

.postItem{display:block;background:#eee;margin-top:5px;}
p{color:red;}

JavaScript

$(document).ready(function(){
$("form#statusUpdateForm").submit(function(e) {
        e.preventDefault();
        var status_content = $('textarea[name="postText"]', this).val();
       
        $("#posts").append('<div class="postItem"><div id="postContent"><p>'+status_content +'</p></div><ul id="comment"><li></li></ul><div class="comment_entry"><form method="post" action="#" ><input name="comment_content" type="text" /><input type="hidden" name="uname" value="vikas" /></form></div></div>');
           
          
        
        return false;
    });
    
    /******comment adding*******/
    $('#posts').on('submit','.comment_entry form',function (e) {
            e.preventDefault();
              
            
            var comment = $('input[name="comment_content"]', this).val();
            if(comment.length != 0){  
                $(this).parent().prev().append('<li><a class="light" href="/"></a>' + comment + '</li>');
            }
           
            return false;
               });


});