JSFiddle - React, Tailwind, and code Playground

by Oki Prasaastio

HTML

<div class="container"> 
		<table>
			<tbody id="tablebody">
				<tr>
					<td class="content">
						<div class="AppendedContainer"> <!-- Appended content will be in here--> </div>
						<div class="form">
							<div class="title">Title</div>
							<input type="text" class="input-text">
							<div class="content">Content</div>
							<textarea class="input-textarea"></textarea>
							<div class="a">
								<button type="button" class="add-button" href="javascript:void(0)" id="add">Add</button>
								<button type="button" class="remove-button" href="javascript:void(0)" id="remove">Clear</button> 
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

CSS

body {
		font-family: Helvetica, Arial, sans-serif;
		color: #34495e;
	}

	.container {
		width: 500px;
		background-color: #eff0f2;
		margin: 0 auto;
		padding: 20px;
	}

	.content .form {
		width: 480px;
	}


	.content .form input {
		border: 2px solid #bdc3c7;
		color: #34495e;
		font-size: 15px;
		padding: 8px 12px;
		-webkit-appearance: none;
		border-radius: 6px;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		width: 100%;
	}

	.content .form textarea {
		border: 2px solid #bdc3c7;
		color: #34495e;
		font-size: 15px;
		padding: 8px 12px;
		-webkit-appearance: none;
		border-radius: 6px;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		margin-bottom: 10px;
		width: 100%;
	}

	.content .form input:focus {
		border: 2px solid #3498DB;
		outline: none;
	}

	.content .form textarea:focus {
		border: 2px solid #3498DB;
		outline: none;
	}

	.content .form .title,.content {
		color: #6b6a63;
		font-size: 14px;
		padding-bottom: 5px;
	}

	.content .form .content {
		padding-top: 10px;
	}

	.add-button {
		position: relative;
		vertical-align: top;
		width: 100%;
		padding: 5px;
		font-size: 14px;
		text-decoration: none;
		color: #fff;
		text-align: center;
		text-shadow: 0 1px 2px rgba(0,0,0,.25);
		background: #01afd1;
		border: 0;
		border-bottom: 2px solid #0699b6;
		cursor: pointer;
		-webkit-box-shadow: inset 0 -2px #0699b6;
		box-shadow: inset 0 -2px #0699b6;
		width: 100px;
	}

	.remove-button {
		position: relative;
		vertical-align: top;
		width: 100%;
		padding: 5px;
		font-size: 14px;
		text-decoration: none;
		color: #fff;
		text-align: center;
		text-shadow: 0 1px 2px rgba(0,0,0,.25);
		background: #e74c3c;
		border: 0;
		border-bottom: 2px solid #c0392b;
		cursor: pointer;
		-webkit-box-shadow: inset 0 -2px #c0392b;
		box-shadow: inset 0 -2px #c0392b;
		width: 100px;
	}

	.add-button:active,.remove-button:active {
		top: 1px;
		outline: none;
		-webkit-box-shadow: none;
		box-shadow:...

JavaScript

var i = 1;
	var inpt = $('.input-text').val();
	var text = $('.input-textarea').val();


	$('#add').click(function() {

		if ( $('.input-text').val() == '' ){
			alert('The field is empty');
		}
		else {
			if (i > 5 ) {
				alert('You just can input 5 Contents');
			}
			else {

				$('.AppendedContainer').append('<div class="AppendedContent"><div class="title">' + $('.input-text').val() + '</div> <div class="text">' + $('.input-textarea').val() + '</div></div>');

				$('.input-text').val('');
				$('.input-textarea').val('');

				i++;
				return false;
			} 
		}
	});

	$(document).on('click', '#remove' , function() {
		$('.AppendedContent' ).remove();

		return false;
	});