jQuery add and remove active classes on next and previous states
<p>I currently have eight icons, when the user clicks on the individual icon an active class is added. The user can also use the next and previous buttons to trigger the next and previous classes.</p>

<p>The problem, when the user selects one of the icons and then uses the next or previous buttons the function doesn't know which is the current selected icon and then clicks though from the start of the icon list. </p>

<p>Any help/advice would be helpful. </p>

<p>JS</p>

<pre><code>  $(".result-icons li").click(function() {
    if (!$(this).hasClass("active")) {
      $(".result-icons li.active").removeClass("active");
      $(this).addClass("active");
    }
  });
  $('.result-icons button').click(function(e) {
    e.stopPropagation();
  });
  var list = $(".result-icons ul");
  var li = list.children();
  var lengthMinusOne = li.length - 1;
  var index = 0;
  var num = $(".result-icons ul li").length;
  var prevLi = $(li[0]);
  $(".next").click(function() {
    index++;
    if (index &gt; lengthMinusOne) index = 0;
    prevLi.removeClass("active");
    prevLi = $(li[index]).addClass("active");
  });
  $(".previous").click(function() {
    index--;
    if (index &lt; 0) index = lengthMinusOne;
    prevLi.removeClass("active");
    prevLi = $(li[index]).addClass("active");
  });
</code></pre>

<p>HTML</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="column small-12 medium-12 large-12 text-center align-middle"&gt;
    &lt;div class="result-icons"&gt;
     &lt;ul&gt;
       &lt;li&gt;
         &lt;img src="images/results/icons/one.svg" alt=""/&gt;
         &lt;p&gt;&lt;strong&gt;Title One&lt;/strong&gt;&lt;/p&gt;
       &lt;/li&gt;&lt;li&gt;
         &lt;img src="images/results/icons/two.svg" alt=""/&gt;
         &lt;p&gt;&lt;strong&gt;Title Two&lt;/strong&gt;&lt;/p&gt;
       &lt;/li&gt;&lt;li&gt;
         &lt;img src="images/results/icons/three.svg" alt=""/&gt;
         &lt;p&gt;&lt;strong&gt;Title Three&lt;/strong&gt;&lt;/p&gt;
       &lt;/li&gt;&lt;li&gt;
         &lt;img src="images/results/icons/four.svg" alt=""/&gt;
         &lt;p&gt;&lt;strong&gt;Title Four&lt;/strong&gt;&lt;/p&gt;
       &lt;/li&gt;&lt;li&gt;
         &lt;img src="images/results/icons/five.svg" alt=""/&gt;
         &lt;p&gt;&lt;strong&gt;Title Five&lt;/strong&gt;&lt;/p&gt;
       &lt;/li&gt;&lt;li&gt;
         &lt;img src="images/results/icons/six.svg" alt=""/&gt;
         &lt;p&gt;&lt;strong&gt;Title Six&lt;/strong&gt;&lt;/p&gt;
       &lt;/li&gt;&lt;li&gt;
         &lt;img src="images/results/icons/seven.svg" alt=""/&gt;
         &lt;p&gt;&lt;strong&gt;Title Seven&lt;/strong&gt;&lt;/p&gt;
       &lt;/li&gt;&lt;li&gt;
         &lt;img src="images/results/icons/eight.svg" alt=""/&gt;
         &lt;p&gt;&lt;strong&gt;Title Eight&lt;/strong&gt;&lt;/p&gt;
       &lt;/li&gt;
     &lt;/ul&gt;
       &lt;button href="" class="previous"&gt;Previous&lt;/button&gt; &lt;button href="" class="next"&gt;Next&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>JSFiddle:</p>

<pre><code>https://jsfiddle.net/1cr9fxyk/
</code></pre>

<p><a href="https://i.stack.imgur.com/DWp4e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DWp4e.png" alt="enter image description here"></a></p>