JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<div id="comments">
        <fieldset>
            <legend>Post Your Comments!</legend>Name:
            <input type="textbox" id="txtName" name="name" />
            <br />
            <br />
        </fieldset>
        <br />
        <textarea id="txtComments" rows="10" cols="30" placeholder="Your Comments!"></textarea>
        <button id="btnAdd">Add!</button>
    </div>
    <div id="postedComments"></div>

JavaScript

$(document).ready(function () {
        $('#btnAdd').on('click', function (event) {
            event.preventDefault();
            // Create new HTML string containing name & comment
            var newComment = '<hr /><div class="name">' + $('#txtName').val() + '</div>' +
                '<div class="comment">' + $('#txtComments').val() + '</div>';
            // This creates a new jQuery object containing newComment 
            // and appends it to the posted comments section
            $(newComment).appendTo('#postedComments');
            // Clear input
            $('#txtComments').val('');
            $('#txtName').val('');
        });
    });