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();
}