JSFiddle - React, Tailwind, and code Playground

by vandanasrivastava

HTML

<script src="http://lcdsantos.github.io/jQuery-Selectric/jquery.selectric.js"></script>
<link rel="stylesheet" href="http://lcdsantos.github.io/jQuery-Selectric/selectric.css">
<div class="allCatsContainer">
    <div class="clonedInput" id="entry1">
		<h2 id="reference" name="reference" class="heading-reference">Child #1</h2>
	<div class="form-group clearfix">
		<label>First name</label>							
		<input type="text" value="" class="text" id="FirstName">
	</div>
	<div class="form-group clearfix">
		<label>Surname</label>							
		<input type="text" value="" class="text" id="LastName">
	</div>
	<div class="form-group clearfix">
		<label>Gender</label>							
		<div class="gender">
			<select id="gender" class="basic">
				<option value="Boy">Boy</option>
				<option value="Girl">Girl</option>
			</select>
		</div>
	</div>
	<div class="form-group clearfix">
		<label>Date of Birth</label>							
		<div class="dob">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 date">
				<div class="dobWrapper">
					<select id="day" class="basic">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
					</select>
				</div>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 month">
				<div class="monthWrapper">
				<select id="month" class="basic">
					<option value="Jan">Jan</option>
					<option value="Feb">Feb</option>
				</select>
				</div>
			</div>	
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 year">
				<div class="yearWrapper">
					<select id="year" class="basic">
						<option value="2010">2010</option>
						<option value="2010">2011</option>
						<option value="2012">2012</option>
						<option value="2013">2013</option>
						<option value="2014">2014</option>
					</select>
				</div>
			</div>
		</div>
	</div>
	</div>
        </div>    
        <a href="javascript:void(0)" id="addChild"> Add another child</a>

JavaScript

$(function(){
$(".basic").selectric();
$('#addChild').on('click', function () {
    
				var num     = $('.clonedInput').length, 
		            newNum  = new Number(num + 1),      
		            newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); 
		        
				 if (newNum == 4) { 
		        	  	alert("Sorry, You can add upto 3 childrens only");
		              	return false; 
				 } 
				 
		        console.log(newElem);
		        
		        newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Child #' + newNum);
		 
		        // Title - select
		        newElem.find('.fnameLabel').attr('for', 'ID' + newNum + '_title');
		        newElem.find('.fName').attr('id', 'ID' + newNum + '_fName').attr('name', 'ID' + newNum + '_fName').val('');
		 
		        // First name - text
		        newElem.find('.surLabel').attr('for', 'ID' + newNum + '_sName');
		        newElem.find('.sName').attr('id', 'ID' + newNum + '_sName').attr('name', 'ID' + newNum + '_sName').val('');
		 
		        // Last name - text
		        newElem.find('.genderLabel').attr('for', 'ID' + newNum + '_gender');
		        newElem.find('.genderSelect').attr('id', 'ID' + newNum + '_gender').attr('name', 'ID' + newNum + '_gender');
		        
		 
		        // Color - checkbox
		        newElem.find('.dobLab').attr('for', 'ID' + newNum + '_dobLab');
		        newElem.find('.dob').attr('id', 'ID' + newNum + '_dob').attr('name', 'ID' + newNum + '_dob');
		 
		        $('#entry' + num).after(newElem);
		        $('#ID' + newNum + '_title').focus();
		 
		    
		       $('#btnDel').attr('disabled', false);
		 
		 });
    });