TheoryOfNekomata
/
formxtra

<!DOCTYPE html>
<html lang="en-PH">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>
		<article>
			<h2></h2>
			<form>
				<div>
					<input type="text" placeholder="First Name" name="first_name" />
				</div>
				<div>
					<input type="text" placeholder="Middle Name" name="middle_name" />
				</div>
				<div>
					<input type="text" placeholder="Last Name" name="last_name" />
				</div>
				<fieldset>
					<legend>Gender</legend>
					<div>
						<label>
							<input type="radio" name="gender" value="m" />
							Male
						</label>
						<label>
							<input type="radio" name="gender" value="f" />
							Female
						</label>
					</div>
				</fieldset>
				<div>
					<select name="civil_status">
						<option value="">Select Civil Status</option>
						<option value="single">Single</option>
						<option value="married">Married</option>
						<option value="divorced">Divorced</option>
						<option value="separated">Separated</option>
					</select>
				</div>
				<div>
					<label>
						<input type="checkbox" name="new_registration" />
						New Registration
					</label>
				</div>
				<div>
					<label>
						<input type="checkbox" value="filipino" name="nationality" />
						Filipino
					</label>
				</div>
				<fieldset>
					<legend>
						Default Dependents
					</legend>
					<div>
						<label>
							<input type="radio" value="James" name="dependent" />
							James
						</label>
						<label>
							<input type="radio" value="Jun" name="dependent" />
							Jun
						</label>
					</div>
				</fieldset>
				<div>
					<button type="button" class="dependents">
						Add Dependents
					</button>
				</div>
				<div>
					<textarea name="notes" placeholder="Notes"></textarea>
				</div>
				<div>
					<button name="submit" value="Hello" type="submit">Hello</button>
					<button name="submit" value="Hi" type="submit">Hi</button>
				</div>
			</form>
		</article>
		<script>
			Array.from(document.getElementsByClassName('dependents')).forEach(d => {
				d.addEventListener('click', e => {
					const container = document.createElement('div')
					const input = document.createElement('input')
					input.name = 'dependent'
					input.type = 'text'
					input.placeholder = 'Dependent'
					container.classList.add('additional-dependent')
					container.appendChild(input)
					e.target.parentElement.parentElement.insertBefore(container, e.target.parentElement)
				})
			})
		</script>
	</body>
</html>