How can I iterate through an <ul> using a button?

Question

I am creating a kind of a help bar on the right side of the screen for a website.

I have an index highlighted by a class; How can iterate through the using this "next" button and highlighting each step?

Fiddle: https://jsfiddle.net/1wvd690h/

HTML:

<button id="next-help">Next</button>

<ul id="helpBar-list" class="no-indent">
    <li class="highlight">Click on Online PO's</li>
    <li>Select the 'Total' Folder</li>
    <li>Type the name of th Supplier in the filter box</li>
    <li>Open a PO containing the items you need by clicking on the PO Number</li>
    <li>Review the PO Contents</li>
    <li>If this Purchase Order has the items you need, click on the 'Copy' icon</li>
    <li>Clicky 'Copy &amp; New' in the prompt</li>
    <li>Change quantities as necessary</li>
    <li>Review, and submit your order when ready</li>
</ul>

jQuery:

$("#next-help").click(function (){
    //should go to next index in <ul>
});

var listItems = $("#helpBar-list li");

listItems.each(function (index)
{
    //this is how i am looping through entire list, but i don't need to do that
    console.log(index + ": " + $(this).text());
});

Answer 1

How about

$("#next-help").on("click",function (){
  $(".highlight").removeClass("highlight").next().addClass("highlight");
});

to loop and save index for storage

$(function() {
  var $list = $("#helpBar-list li");   
  $("#next-help").on("click",function (){
    var idx = $(".highlight").removeClass("highlight").next().index();
    if(idx==-1) idx=0; // here you can do what you want with idx
    $list.eq(idx).addClass("highlight");
  });
});

FIDDLE

$(function() {
  var $list = $("#helpBar-list li");   
  $("#next-help").on("click",function (){
    var idx = $(".highlight")
      .removeClass("highlight")
      .next()
      .index();
    if(idx==-1) idx=0;
    $list.eq(idx).addClass("highlight");
    console.log(idx);  
  });
});

.highlight {
	background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="next-help">Next</button>

<ul id="helpBar-list" class="no-indent">
    <li class="highlight">Click on Online PO's</li>
    <li>Select the 'Total' Folder</li>
    <li>Type the name of th Supplier in the filter box</li>
    <li>Open a PO containing the items you need by clicking on the PO Number</li>
    <li>Review the PO Contents</li>
    <li>If this Purchase Order has the items you need, click on the 'Copy' icon</li>
    <li>Clicky 'Copy &amp; New' in the prompt</li>
    <li>Change quantities as necessary</li>
    <li>Review, and submit your order when ready</li>
</ul>

Answer 2

One more solution:

var listItems = $("#helpBar-list li");
var i = listItems.filter('.highlight').index();

$("#next-help").click(function () {
    listItems.removeClass('highlight').eq(++i % listItems.length).addClass('highlight');
});

.highlight {
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="next-help">Next</button>
<ul id="helpBar-list" class="no-indent">
    <li class="highlight">Click on Online PO's</li>
    <li>Select the 'Total' Folder</li>
    <li>Type the name of th Supplier in the filter box</li>
    <li>Open a PO containing the items you need by clicking on the PO Number</li>
    <li>Review the PO Contents</li>
    <li>If this Purchase Order has the items you need, click on the 'Copy' icon</li>
    <li>Clicky 'Copy &amp; New' in the prompt</li>
    <li>Change quantities as necessary</li>
</ul>