No entiendo después de ciertos clics, agregar elemento no se activa, simplemente se detiene, mis variables de conteo funcionan bien, pero no sé cuál parece ser el problema aquí.
$(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; })Creo que solo debe manipular la variable add_count, si agrega un elemento o lo elimina. Como esto:
$(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; } });