Cycling through sibling elements on button click and assigning a class to the “active” element
You are doing a lot of DOM traversal. I'll show you the updated code and explain it.

HTML

&lt;div class="itemtoggle"&gt;
  &lt;ul class="items"&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li class="d-none"&gt;Item 2&lt;/li&gt;
    &lt;li class="d-none"&gt;Item 3&lt;/li&gt;
    &lt;li class="d-none"&gt;Item 4&lt;/li&gt;
  &lt;/ul&gt;
  &lt;button type="button" class="btn-toggle"&gt;Toggle Next&lt;/button&gt;
&lt;/div&gt;


CSS

.d-none {
  display: none;
}


JAVASCRIPT

$(document).ready(() =&gt; {
  const toggleButton = $('.btn-toggle');
  const items = document.querySelectorAll('.items &gt; li');
  let index = 0;
  toggleButton.on('click', () =&gt; {
     $(items[index]).toggleClass('d-none');
     index = index + 1;
     if(index === items.length){
       index = 0;
     }
     $(items[index]).toggleClass('d-none');
  });
});


I updated the HTML so that the li's after the first have display none. In your previous code this was the initial state, so its better to set it in the HTML than using JavaScript to do it.

What i have done in JavaScript is that i store all &lt;li&gt; and an associated index, then when you press Toggle Next, i just toggle the &lt;li&gt; at the current index, and increment index by 1, if index === items.length, then it must mean we are out of bounds, because items[4] would be undefined, so we have to reset it to 0.

After increment, we toggle d-none on the new index.