JSFiddle - React, Tailwind, and code Playground

by Superman

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<input type="text" class="form_input nof" name="nof" size="3" />
<div class="myfld">
			
</div>

CSS

.form_box_2 {
	margin-top: 30px;
	padding:10px 8px;
	margin-left:10px;
	width:250px;
	float:left;
	background:#e8e8e7;
	margin-bottom:30px;
}
.form_box_2:hover {
	background:#cdcdc3;
	color:#000;
}
.myfld {
	
	margin-top:20px;
}
.applicantform_row label {
	width:140px;
	text-align: left
}
.applicantform_row.appage label {
	width:40px;
}
.applicantform_row input {
	width:180px;
	height:25px;
}

JavaScript

$('.nof').keyup(function(){
$('.myfld').empty();
var html = '';
    nof = $('.nof').val();
    html = html + '<div class="partners">';
    for(var x = 1;  x <= nof; x++) {
    html = html + '<div class="form_box_2">';  
   
    html = html + '<div class="applicantform_row"><label>Date of Birth: </label><span class="appdate dob" id="dob_'+x+'" name="partner_dob_'+x+'"  /></div>';
  
    html = html + '</div>';
      $('.myfld').html(html);
      $(function() {
	    $( ".dob" ).datepicker();
      });
    }
    var html_end = '</div>';
    $('.myfld').append(html_end);
});