Add New Field

Posted on : 20th June 2022 | Author : @ByDev24

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="code-container">
	<div class="form-section">
		<div class="form-row mb-3">
			<div class="row align-items-center">
				<div class="col-5">
					<input type="text" placeholder="First Name" name="first_name[]" class="form-control">
				</div>
				<div class="col-5">
					<input type="text" placeholder="Last Name" name="last_name[]" class="form-control">
				</div>
			</div>
		</div>
	</div>
	<div class="text-end mt-4">
		<button type="button" class="btn btn-primary btn-sm add-more">Add More + </button>
	</div>
</div>

body{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	margin:15px;
}
.form-control{
	font-size: 14px;
}
.code-container {
    width: 450px;
    max-width: 100%;
    padding: 10px;
    box-shadow: 0px 0px 10px #0000000d;
    border-radius: 10px;
}

//Stored Row
let newRow = '<div class="form-row  mb-3"><div class="row align-items-center"><div class="col-5"><input type="text" placeholder="First Name" name="first_name[]" class="form-control"></div><div class="col-5"><input type="text" placeholder="Last Name" name="last_name[]" class="form-control"></div><div class="col-2 text-end"><button type="button" class="btn btn-danger btn-sm remove-row" onclick="removeRow(event)">x</button></div></div></div>';

//Add New Row
var addBtn = document.querySelector(".add-more");
addBtn.addEventListener("click",function(){
	document.querySelector(".form-section").insertAdjacentHTML("beforeend", newRow);
});

//Remove Row
const removeRow = (event) => {
    event.target.parentNode.parentNode.remove();
}