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"  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;

               
                
            })

CodePudding user response：

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"  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;
  }
});