JSFiddle - React, Tailwind, and code Playground

HTML

<div>
					<span></span>
					<div class="m-section text-center">
						<div class="m-section__content">
							<table class="table table-bordered table-hover">
								<thead>
									<tr>
										<th>ID</th>
										<th>Service name</th>
										<th>Qty</th>
										<th>Price</th>
										<th>Amount</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th scope="row">1</th>
										<td>Hong kong - visa tourist 3 month single</td>
										<td><input type="number" min="1" max="100" class="form-control m-input input-number valid text-center" value="1" id="qty" required></td>
										<td>104</td>
										<td>208</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div>
					<b>Applicants</b>
				</div>
				<div id="appen-aplicant">
					<div class="applicant" id="applicant">
						<div class="applican-t">
							<span>Applicant 1</span>
							<select class="form-control form-filter m-input col-2 cursor" name="" id="">
								<option value="">Vietnam</option>
								<option value="">Honhkong</option>
								<option value="">Korea</option>
							</select>
							<input type="text" class="form-control col-2 valid" placeholder="Applicant full name" required>
							<select class="form-control form-filter m-input col-1 valid" name="" required>
								<option value="">Gender</option>
								<option value="">Male</option>
								<option value="">Female</option>
							</select>
							<div class="col-2 date-time">
								<div class="input-group date">
									<input type="text" class="form-control m-input m_datetimepicker_6 valid" placeholder="Select date" required>
									<div class="input-group-append">
										<span class="input-group-text">
											<i class="la la-calendar glyphicon-th"></i>
										</span>
									</div>
								</div>
							</div>
							<input type="text" class="form-control col-1 valid" placeholder="Passport no" required>
							<input...

CSS

#divParent {
    width:250px;
    min-height:250px;
    border: 1px solid #ccc;
}

JavaScript

$(document).ready(function () {

	$('#qty').on('change', function () {

		var input    = $('#qty').val() || 0;
		var children = $('#appen-aplicant > div').length;     
			if(input < children){
			$('#appen-aplicant').empty();
			children=0;
		}

		for (var i = children+1; i <= input; i++) {
			$("#appen-aplicant").append('<div class="applicant" id="applicant"><div style="padding-top: 3%;"><span>Applicant '+i+'</span><select class="form-control form-filter m-input col-2" required="" name="" id="" style="cursor: pointer;"><option value="">Vietnam</option><option value="">Honhkong</option><option value="">Korea</option></select><input type="text" class="form-control col-2 valid" placeholder="Applicant full name" required=""><select class="form-control form-filter m-input col-1 valid" name="" required=""><option value="">Gender</option><option value="">Male</option><option value="">Female</option></select><div class="col-2 date-time"><div class="input-group date"><input type="text" class="form-control m-input m_datetimepicker_6 valid" placeholder="Select date" required=""><div class="input-group-append"><span class="input-group-text"><i class="la la-calendar glyphicon-th"></i></span></div></div></div><input type="text" class="form-control col-1 valid" placeholder="Passport no" required=""><input type="text" class="form-control col-1 valid" placeholder="Pass expiry" required=""><label class="m-radio m-radio--check-bold m-radio--state-success radio-15"><input type="radio" name="main1" value="inactive"><b class=""> Main contact</b><span class="radio-n"></span></label></div><div style="padding-top: 20px;padding-bottom: 20px;"><span>Permanent Address:</span><input type="text" class="form-control valid" style="width: 20%!important;" required=""><span style="padding-left: 10%;">Current Address:</span><input type="text" class="form-control valid" style="width: 20%!important;" required=""></div></div>'
				);
		}
	});
});