Dynamic form

dynamic form with dynamic fields

by vaheed akhtar

HTML

<div>
	<h1>Dynamic Cars</h1>
	<div id="cards">
		<div class="card-header card-1">
			<div class="card-body">
				<div class="input-container" field-no="1">
					<input type="text" class="input-text-1"/>
					<button id="add-field">ADD</button>
				</div>
			</div>
			<button id="add-card">ADD CARD</button>
		</div>
	</div>
</div>

CSS

body {
    padding: 5px;
}
.card-body{
	  padding: 10px 0;
}
.card-header{
	padding: 23px 10px;
  border: 1px solid;
	margin: 10px;
}

JavaScript

$(document).ready(function() {
 var next = 1;
 function dynamaicHtml(){
	var htmlData = 
	`<div class="card-header card-${next}">
		<div class="card-body">
			<input type="text" class="input-text-${next}" field-no=${next}/>
			<button id="add-field">ADD</button>
		</div>
		<button id="add-card">ADD CARD</button>
	</div>`;
	return htmlData;
	}
	
	$('body').on('click', '#add-card', function () {
		var addto = ".card-" + next;
		var removeBtn = 
		`<button id="remove${next}" card-no="card-${next}" 
			class="remove-card" >REMOVE</button>`;
		next = next + 1;
		$(this).after(removeBtn);
		$(addto).after(dynamaicHtml());
		$(this).remove();
	})
	
	$('body').on('click', '.remove-card', function () {
		 	var cardnumber = $(this).attr('card-no')
			$('.'+cardnumber).remove()
	})
	
	
	
	
	function dynamaicInput (index) {
		var htmlInput =
		`<div class="input-container" filed-no=${index}>
			<input type="text" class="input-text-${index}"/>
			<button id="add-field">ADD</button>
		</div>`
		
		return htmlInput
	}
	
	$('body').on('click', '#add-field', function(){
		var addTo = $(this).closest('div');
		let fieldNo = $(this).closest('div').attr('field-no')
		var removeBtn = 
		`<button id="remove-field${fieldNo}" 
				class="remove-field" >REMOVE</button>`;
		fieldNo = fieldNo + 1;
		$(this).after(removeBtn);
		$(addTo).after(dynamaicInput(fieldNo));
		$(this).remove();
	})
	
	$('body').on('click', '.remove-field', function(){
		$(this).closest('div').remove();
	})
	
});