i don't understand after certain clicks add element is not firing , it just stops, my count variables are working fine but don't know what seems to be the issue here,
$(document).on('click','.add-role-btn',function(e){
console.log('working')
if (add_count < 3){
$('.role-name-container').append(
$('<input type="text" name="role_name" class="form-control mt-3" placeholder="Role name">')
)
}
add_count += 1;
})
$(document).on('click','.delete-role-btn',function(e){
console.log('working')
let last_elem = $('.role-name-container').children().last();
if ($('.role-name-container').first().not(last_elem))
{
last_elem.remove()
}
add_count -= 1;
})
I think you should only manipulate the add_count variable, if you add an element or delete it. Like this:
$(document).on("click", ".add-role-btn", function (e) {
console.log("working");
if (add_count < 3) {
$(".role-name-container").append(
$(
'<input type="text" name="role_name" class="form-control mt-3" placeholder="Role name">'
)
);
add_count += 1;
}
});
$(document).on("click", ".delete-role-btn", function (e) {
console.log("working");
let last_elem = $(".role-name-container").children().last();
if ($(".role-name-container").first().not(last_elem)) {
last_elem.remove();
add_count -= 1;
}
});