I have the below code that adds a new record to a page and updates two HTML elements with the new count of records fine.
The issue is when a new record is added and the .remove_pse_record
is clicked the record count will update by 1,2,3,4 etc. it seems to be remembering how many records are deleted and increases the value so lets say the record count is 10 and I remove a record the count will be 9, the second record I remove the count will now be 7.
$(".remove_pse_record").click(function(e) {
$("#" + $(this).data("id")).fadeTo("slow", 0.00, function(){
$(this).slideUp("slow", function() {
$(this).remove();
});
});
update_record_count(".pse_record_count");
e.preventDefault();
});
$("#add_pse_exception").click(function(e) {
last_id = $("#configuration > div").last().data("id");
next_id = last_id + 1
new_record = "<div id=\"a_" + next_id + "\" data-id=\"" + next_id + "\" class=\"record\">" +
"<div class=\"full_col\">" +
"<div><div>Notes:</div><div><textarea name=\"a_notes_" + next_id + "\"></textarea></div></div>" +
"</div>" +
"<div class=\"full_col separator\">" +
"<ul>" +
"<li><a href=\"#\" title=\"Remove new record\" class=\"remove_pse_record\" data-id=\"a_" + next_id + "\"><i class=\"fa-solid fa-trash remove_icon\"></i></a></li>" +
"</ul>" +
"</div>" +
"</div>"
$(new_record).insertAfter($("#configuration > div").last());
update_record_count(".pse_record_count", true);
$(".remove_pse_record").click(function(e) {
$("#" + $(this).data("id")).fadeTo("slow", 0.00, function(){
$(this).slideUp("slow", function() {
$(this).remove();
});
});
update_record_count(".pse_record_count");
e.preventDefault();
});
e.preventDefault();
});
function update_record_count(element, increase=false) {
count = parseInt($(element + ":first").text());
$(element).each(function() {
if (increase) {
$(this).text(count + 1);
} else {
$(this).text(count - 1);
}
});
}