Basic Example

							
import formFieldAppender from 'DEGJS/formFieldAppender';

let element = document.querySelector('.js-example-1');
formFieldAppender(element);
						

Basic Example w/Options and Callbacks

							
import formFieldAppender from 'DEGJS/formFieldAppender';

let element = document.querySelector('.js-example-2'),
	options = {
		firstItemIsRemovable: false,
		onlyLastItemIsRemovable: true,
		onItemAddCallback: addCallback,
		onItemRemoveCallback: removeCallback
	},
	formFieldInst = formFieldAppender(element, options);

function addCallback(addedItem, allItems) {
	alert('Item added!');
	console.log(addedItem);
	console.log(allItems);
};

function removeCallback(removedItem, allItems) {
	alert('Item removed!');
	console.log(removedItem);
	console.log(allItems);
};
						

Item Blueprint as HTML element

							
import formFieldAppender from 'DEGJS/formFieldAppender';

let element = document.querySelector('.js-example-3'),
	options = {
		blueprint: buildElementBlueprint
	},
	formFieldInst = formFieldAppender(element, options);

function buildElementBlueprint() {
	let el = document.createElement('div');
	el.classList.add('js-ffa-item');
	el.insertAdjacentHTML('afterbegin', `
		<div class="field">
			<label for="phone3">Phone number</label>
			<input name="phone3" id="phone1" type="text">
		</div>
		<button class="js-ffa-add-trigger">Add</button>
		<button class="js-ffa-remove-trigger">Remove</button>
	`);
	return el;
};
						

Item Blueprint as String

							
import formFieldAppender from 'DEGJS/formFieldAppender';

let element = document.querySelector('.js-example-4'),
	options = {
		blueprint: buildStringTemplate
	},
	formFieldInst = formFieldAppender(element, options);

function buildStringTemplate() {
	return `
		<div class="js-ffa-item">
			<div class="field">
				<label for="phone3">Phone number</label>
				<input name="phone3" id="phone1" type="text">
			</div>
			<button class="js-ffa-add-trigger">Add</button>
			<button class="js-ffa-remove-trigger">Remove</button>
		</div>
	`;
};