I have created a form where users can add tests. Everything is working smoothly but I want the previous "Add Another Test" field to be removed when the user clicks on it and a new field to be shown.
Everything is running well, but the issue is that when the user clicks on "Add Another Field," the previous field is not hidden. Also, when the user clicks on "Remove," the previous field should hide automatically.
Could you please review my code? Thank you.
! function(a) {
"use strict";
a(function() {
var b = a(".wpcf7-field-groups");
b.length && (b.each(function() {
a(this).data("group-model", a(this).find(".wpcf7-field-group").eq(0).clone())
}), a("body").on("wpcf7-field-groups/change", ".wpcf7-field-groups", function() {
var b = a(this).find(".wpcf7-field-group");
b.each(function(b) {
a(this).find(".wpcf7-field-group-remove").toggle(b > 0);
var c = b + 1;
a(this).find("[name]").each(function() {
var b = a(this),
d = b.closest(".wpcf7-form-control-wrap"),
e = b.attr("name"),
f = e.indexOf("[]") > -1,
g = e.replace("[]", ""),
h = g.replace(/__[0-9]*/, "") + "__" + c;
d.length && !d.hasClass(h) && d.removeClass(g).addClass(h), h += f ? "[]" : "", b.attr("name", h)
})
}), a(this).find(".wpcf7-field-group-count").val(b.length)
}), b.trigger("wpcf7-field-groups/change"), a("body").on("click", ".wpcf7-field-group-add, .wpcf7-field-group-remove", function() {
var b = a(this),
c = b.closest(".wpcf7-field-groups");
if (b.hasClass("wpcf7-field-group-add")) {
var d = c.data("group-model").clone();
c.append(d), b.trigger("wpcf7-field-groups/added");
} else b.trigger("wpcf7-field-groups/removed"), b.closest(".wpcf7-field-group").remove();
return c.trigger("wpcf7-field-groups/change"), !1
}))
})
}(jQuery);
This is my full working CodePen code. Please check and let me know how to fix this :)
Thank you in advance