jquery show only next div with same class
<p>I'm trying to do a sequence of steps with jquery but I'm failing to achieve the result I want.</p>

<p>I have 3 steps, with a class of <code>.wiki-step-</code> plus a number.
my javascript is this one:</p>

<pre><code>function stepping() {
    var stepButton = $("a.button");
    var step = $("[class*='wiki-step-']");
    stepButton.closest(step).hide().next(step).show();
}

$("a.button").on("click",function(){
    stepping();
});
</code></pre>

<p>It works correctly with only 2 steps but I've noticed that if I add a third one, the jquery <code>(next)</code> shows all the other steps at once but I want to show only the next div in line, not all of them.</p>

<p>Here's a fiddle: <a href="https://jsfiddle.net/vsomcag2/1/" rel="nofollow noreferrer">https://jsfiddle.net/vsomcag2/1/</a>
you can see how it shows the 2nd and 3rd step at once.</p>

<p>I can't use <code>nextUntil()</code> i guess, I think I should use a counter of some sort but I don't know where to start. I would like to avoid specifying numbers because I would like to have the ability to add or remove steps without editing the js.</p>

<p>Any help is greatly appreciated.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    function stepping() {
        var stepButton = $("a.button");
        var step = $("[class*='wiki-step-']");
        stepButton.closest(step).hide().next(step).show();
    }

    $("a.button").on("click",function(){
        stepping();
    });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div[class*="wiki-step-"] {
        display: none;
       width: 500px;
       height: 500px;
       border:1px solid red;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;


&lt;div class="wiki-step-1" style="display:block"&gt;
&lt;h1&gt;step 1&lt;/h1&gt;
&lt;a href="#" class="button"&gt;next&lt;/a&gt;
&lt;/div&gt;

&lt;div class="wiki-step-2"&gt;
  &lt;h1&gt;step 2&lt;/h1&gt;
&lt;a href="#" class="button"&gt;next&lt;/a&gt;
&lt;/div&gt;

&lt;div class="wiki-step-3"&gt;
  &lt;h1&gt;step 3&lt;/h1&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>