JSFiddle - React, Tailwind, and code Playground

by Rohan Kumar

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<div class="container" style="width:610px">
	<div class="sub_container" style="height:260px; margin-top:10px;">
		<form action="#" method="post" name="theform">
			<div style="float:left">
				<table>
					<tr>
						<td>Name:</td>
						<td><input type="text" class="name input_field" name="Name" pattern="^[a-zA-Z\s]+$" placeholder="Name" title="asd" /></td>
					</tr>
					<tr>
						<td>Email:</td>
						<td><input type="text" class="email input_field" name="Email" placeholder="Email" /></td>
					</tr>
					<tr>
						<td>Message:</td>
						<td><textarea class="message input_field" name="Message" placeholder="Message"></textarea></td>
					</tr>
				</table>
			</div>
			<div class="preview" style="float:right;">
				Dear <span class="preview_name"></span>,
				<br>
				<br>
				<div class="preview_message">
				</div>
			</div>
			<button type="submit" style="margin-top:10px; margin-left:285px">Submit</button>
		</form>
	</div>
	<input type="button" class="add_new" value="Add another person" style="position:absolute; top:130px; left:10px" />
</div>

CSS

.preview { 
	width:300px; 
	height:200px; 
	border:1px solid #aaa; 
	background-color:#eee; 
	color:#888; 
	padding:10px;
}
label.error{
    color:red;
}
}

JavaScript

$('.name').keyup(function(e) {
    var input = $(this).val().replace(/[\n]/g,'<br />');
    $(this).closest('.sub_container').find('.preview_name').html(input);
});

$('.message').keyup(function(e) {
    var input = $(this).val().replace(/[\n]/g,'<br />');
    $(this).closest('.sub_container').find('.preview_message').html(input);
});

$('.add_new').click(function(e) {
    var count = parseInt($("#counter").val(),10);
    $("#counter").val(count+1);
    var cloneEle = $(this).prev(".sub_container").clone(true);
    cloneEle.find('form').attr("name","theform"+count);
    cloneEle.appendTo('.container').find('input').val('');
    $('.preview_message').last().html('');
    $('.preview_name').last().html('');
});

$("form").each(function() {
    $(this).validate({
        submitHandler: function(form) {
            
            return false; // Temporary
        }
    });
});