jquery - If .next() element is the .last() element? -

i know it's quite simple, .next() , .last() kind of confuse me. i'm kind of mixed up.

what trying add class when next element last of kind in list.

fiddle

in current code adds class after last element displayed, when goes first.

jquery: im sure has .length

$("#next-button").on('click', function () {     var nextitem  = $('.active').removeclass('active').next(),         breaditem = $('.clickable').next();      if (!nextitem.length) {         nextitem = $('.item').first();          //here try add class ".last" last ".item" element         $('.item').last().addclass('last');     }     nextitem.addclass('active');     breaditem.addclass('clickable');   }); 

this adds class when click on last element going towards first.

also bonus question, confused why when add class .clickable breadcrumbs first 1 takes me right data-id check fiddle

i appreciate community , getting, expert in jquery quite easy, helping me learn.

there u go first requirement

$("#next-button").on('click', function () {     var nextitem  = $('.active').removeclass('active').next(),         breaditem = $('.clickable').next();      if (!nextitem.length) {         nextitem = $('.item').first();         $('.item').last().addclass('last');     }     nextitem.addclass('active');     breaditem.addclass('clickable');     // 1st req      // remove last class items     $('.item').removeclass('last');     var last = $('.item').last();     // check if item last 1     // true add last , remove active     if(nextitem.is(last)) {         nextitem.addclass('last').removeclass('active');     } }); 

2nd requires event delegation since it's dynamically added element

update

$(".breadcrumbs").on('click', '.clickable .breadcrumb', function () {     $('.active').removeclass('active');     var theid = $(this).data("id");      var selecteditem = $("#" + theid);     selecteditem.addclass('active');      $('.item').removeclass('last');     var last = $('.item').last();     if(selecteditem.is(last)) {          selecteditem.addclass('last').removeclass('active');     } }); 

check fiddle