JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<form role="form" id="myform">        
<div id="listOfCommercials">
									   <div id="singleCommercial0">
									
										<div class="form-group">	
											<label>Where do you want to go today?</label>
											<div class="col-lg-12">
												<div class="col-lg-6">
													<div class="checkbox">
														<label>
															<input type="checkbox" value="" name="a0">a
														</label>
													</div>
													<div class="checkbox">
														<label>
															<input type="checkbox" value="" name="b0">b
														</label>
													</div>
													<div class="checkbox">
														<label>
															<input type="checkbox" value="" name="c0">c
														</label>
													</div>
												</div>
												<div class="col-lg-6">
													<div class="checkbox">
														<label>
															<input type="checkbox" value="" name="d0">d
														</label>
													</div>
													<div class="checkbox">
														<label>
															<input type="checkbox" value="" name="e0">e
														</label>
													</div>
													<div class="checkbox">
														<label>
															<input type="checkbox" value="" name="f0">f
														</label>
													</div>
													
												</div>
											</div>
										</div>
											
										<div class="form-group">
											<label>When do you want to go?</label>
											<input type='text' class="form-control" id='datetimepicker' name="appearanceDate0"/>
										</div>
										
										<div...

JavaScript

$(document).ready(function(){
      var i=1;
     $("#add_row").click(function(){
         $('#listOfCommercials').append('<div id="singleCommercial'+i+'"></div>');
      $('#singleCommercial'+i).html('<div class="form-group"> <label>Where do you want to go today?</label> <div class="col-lg-12"> <div class="col-lg-6"> <div class="checkbox"> <label> <input type="checkbox" value="" name="a'+i+'">a</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="b'+i+'">b</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="c'+i+'">c</label> </div>  </div> <div class="col-lg-6"> <div class="checkbox"> <label> <input type="checkbox" value="" name="d'+i+'">d</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="e'+i+'">e</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="f'+i+'">f</label> </div></div> </div> </div> <div class="form-group"> <label>When do you want to go?</label> <input type="text" class="form-control" id="datetimepicker'+i+'" name="appearanceDate'+i+'"/> </div> <div class="form-group"> <label>How long should your trip last?</label> <select class="form-control" name="duration'+i+'"> <option>5 days</option> <option>10 days</option> <option>15 days</option> <option>20 days</option> <option>30 days</option> </select> </div>');

     
      i++; 
         alert(i);
  });
     $("#delete_row").click(function(){
    	 if(i>1){
		 $("#singleCommercial"+(i-1)).html('');
		 i--;
		 }
	 });

	



$.validator.addMethod( "at_least_one", function() {
    return $( "input[name='number[]']:checked" ).length;
}, 'Select at least one number' );

$('#myform').validate({// initialize the plugin
					errorElement: 'div',
					rules: {
                        "number[]": "at_least_one",
						datetimepicker: {
							required: true,
							date: true
						},
						commercialText: {
							required: true,
							minlength: 5
						},
						terms:...