Why does the clone remove method doesn't work after the function was altered? - jquery-ui

Question

I have been trying to delete specific clone data using JQuery -UI. i had to change my functions recently since then the remove button doesn't work. Please help me find my error.
My whole function that includes, Multidimensional Arrays along with form cloning! check out my remove function which i think has no problem in it.
$(function() {
var questionHolder = $('.question').clone(true);
$("#addQuestion").on('click', function(e) {
e.preventDefault();
var str = $("p.number:last").text(),
newValue = parseInt(str, 10) + 1;
var newQ = questionHolder.clone();
newQ.find('input, textarea')
.each(function() {
this.name = this.name.replace(/\[(\d+)\]/, '[' + newValue + ']');
})
.end()
.find('.number')
.html(newValue)
.end()
.appendTo('#questioncontainer')
.after('<br><button class="addQuestion_delete btn btn-danger" type="button">Remove Parent Clone</button><br>');
$(".addQuestion_delete").click(function(e) {
$(this).closest("#questioncontainer").remove();
e.preventDefault();
});
});
$('body').on('click', '.addAnswer', function(e) {
e.preventDefault();
var group = $(this).parent();
parent = $(this).parent().parent();
group.find(".answer:last")
.clone(true)
.find('input, textarea')
.each(function() {
this.name = this.name.replace(/\[(\d+)\]$/,
function(str, p1) {
return '[' + (parseInt(p1, 10) + 1) + ']';
});
})
.end()
.appendTo(
group.find('.answerContainer'))
.after('<button class="addAnswer_delete btn btn-danger" type="button"><i class="fa fa-minus"></i>Remove Child clone</button><br><br><br>');
$(".addAnswer_delete").click(function(e) {
$(this).closest(".answerContainer").remove();
e.preventDefault();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- parent container -->
<div id="questioncontainer">
<!-- parent that clones -->
<div style="border:1px solid black; width:400px; padding:20px; margin-bottom:10px;" class="question border p-5 mt-3 shadow">
<!-- clone items inputs/textareas/files -->
<div class="row">
<div class="col-lg-6">
<!-- Educational Institute -->
<input oninput="checkCompany()" id="company" name="employer[1]" type="text" class="input-form track track_exp_qua" data-score=20>
<span class="bar"></span>
<label class="input-label"> Company <span id="text" class="required"> </span></label>
<!-- Educational Institute -->
<p class="validate text-danger pt-2" id="company_error"></p>
</div>
<div class="col-lg-6">
<!-- Job title -->
<input oninput="checkJobTitle()" id="job_title" name="job_title[1]" type="text" class="input-form track track_exp_qua" data-score=10>
<span class="bar"></span>
<label class="input-label"> Job Title <span id="text" class="required"> </span></label>
<!-- Job title -->
<p class="validate text-danger pt-2" id="job_title_error"></p>
</div>
</div>
<div class="justify-content-center pb-4">
<h4>Below is the child clone</h4>
</div>
<!-- child container -->
<div style="border:1px solid red; padding:20px;" class="answerContainer">
<div class="answer">
<div class="row">
<!-- best project url -->
<div class="col-lg-6">
<input name="best_project[1][1]" type="text" class="input-form track track_exp_qua" data-score=10>
<span class="bar"></span>
<label class="input-label">Best Project<small style="color:#FFBF00;"> (URL's Only) </small> <span id="text" class="optional"> </span></label>
</div>
<!-- best project url -->
</div>
<br>
</div>
</div>
<!-- clone items inputs/textareas/files end-->
<br>
<button class="addAnswer btn btn-info" href="#"><i class="fa fa-plus"></i> Add Child</button>
</div>
<!-- parent that clones end-->
</div>
<!-- parent container end -->
<br>
<button id="addQuestion" class="btn btn-success" href="#"> <i class="fa fa-plus"></i> Add Parent </button>

Answer 1

Some of your objects were too ambigous, so things were not going to work as you expected.
Consider the following example.
$(function() {
function updateName(i, n) {
i = $(i);
var o = i.attr("name");
if (n != undefined) {
i.attr("name", o.replace(/\[(\d+)\]/, '[' + n + ']'));
} else {
i.attr("name", o.replace(/\[(\d+)\]$/,
function(str, p1) {
return '[' + (parseInt(p1, 10) + 1) + ']';
}));
}
return true;
}
function makeDel(cnt, pClass, tObj) {
return $("<button>", {
class: pClass + " btn btn-danger",
type: "button"
}).html(cnt).insertAfter(tObj);
}
function addQuestion(event) {
var self = $(event.target);
event.preventDefault();
var newValue = $(".question").length + 1;
var newQ = $(".question").eq(0).clone(true);
$("input, textarea", newQ).each(function() {
updateName(this, newValue);
});
newQ.appendTo("#questioncontainer");
var newD = makeDel("Remove Parent Clone", "addQuestion_delete", newQ);
newD.click(function(e) {
e.preventDefault();
newQ.remove();
$(this).remove();
});
}
function addAnswer(event) {
var self = $(event.target);
event.preventDefault();
var group = self.parent().find(".answerContainer");
var newA = $(".answer:last", group).clone(true);
$("input, textarea", newA).each(function() {
updateName(this);
});
newA.appendTo(group);
var newD = makeDel("<i class='fa fa-minus'></i> Remove Child clone", "addAnswer_delete", group);
newD.click(function(e) {
e.preventDefault();
newA.remove();
$(this).remove();
});
}
$("body").on("click", "#addQuestion", addQuestion);
$('body').on('click', '.addAnswer', addAnswer);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- parent container -->
<div id="questioncontainer">
<!-- parent that clones -->
<div style="border:1px solid black; width:400px; padding:20px; margin-bottom:10px;" class="question border p-5 mt-3 shadow">
<!-- clone items inputs/textareas/files -->
<div class="row">
<div class="col-lg-6">
<!-- Educational Institute -->
<input oninput="checkCompany()" id="company" name="employer[1]" type="text" class="input-form track track_exp_qua" data-score=20>
<span class="bar"></span>
<label class="input-label"> Company <span id="text" class="required"> </span></label>
<!-- Educational Institute -->
<p class="validate text-danger pt-2" id="company_error"></p>
</div>
<div class="col-lg-6">
<!-- Job title -->
<input oninput="checkJobTitle()" id="job_title" name="job_title[1]" type="text" class="input-form track track_exp_qua" data-score=10>
<span class="bar"></span>
<label class="input-label"> Job Title <span id="text" class="required"> </span></label>
<!-- Job title -->
<p class="validate text-danger pt-2" id="job_title_error"></p>
</div>
</div>
<div class="justify-content-center pb-4">
<h4>Below is the child clone</h4>
</div>
<!-- child container -->
<div style="border:1px solid red; padding:20px;" class="answerContainer">
<div class="answer">
<div class="row">
<!-- best project url -->
<div class="col-lg-6">
<input name="best_project[1][1]" type="text" class="input-form track track_exp_qua" data-score=10>
<span class="bar"></span>
<label class="input-label">Best Project<small style="color:#FFBF00;"> (URL's Only) </small> <span id="text" class="optional"> </span></label>
</div>
<!-- best project url -->
</div>
<br>
</div>
</div>
<!-- clone items inputs/textareas/files end-->
<br>
<button class="addAnswer btn btn-info" href="#"><i class="fa fa-plus"></i> Add Child</button>
</div>
<!-- parent that clones end-->
</div>
<!-- parent container end -->
<br>
<button id="addQuestion" class="btn btn-success" href="#"> <i class="fa fa-plus"></i> Add Parent </button>
Objects are created and referenced a bit better, so it's easier to manipulate them and remove them as needed. Anytime you are doing the same thing multiple times, you could consider creating a function for it.