title: Stepper with pure javascript - highlight specifc step
body: <p>I would like to make it skip step 1 and step 2 and directly jump and highlight on step 3. I tried to do it my own but I only managed to highlight step 3 but not step 1 and 2. I want it to be randomly jump to any step as long as I change it on my javascript. </p>
  
  <p>Is it possible to do so? Below is my snippet. You may try to run it to see the result.</p>
  
  <p>Thanks in advance for any help you can provide!</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>const bullets = [...document.querySelectorAll('.bullet')];
  
  let current = -1;
  
  function next() {
   if(!bullets[current+1]){
    return false;
   }
   current = Math.min(current + 1, bullets.length - 1);
   bullets[current].classList.remove('unhovered');
   bullets[current].classList.add('hovered');
   if(bullets[current].classList.contains('uncompleted')){
    bullets[current].classList.remove('uncompleted');
    bullets[current].classList.add('completed');
   }
  }
  
  function previous() {
   if (bullets[current]) {
    bullets[current].classList.remove('hovered');
    bullets[current].classList.add('unhovered');
    if(bullets[current].classList.contains('completed')){
     bullets[current].classList.remove('completed');
     bullets[current].classList.add('uncompleted');
    }
   }
   current = Math.max(current - 1, -1);
  }
  
  function randomto2() {
   current = Math.min(current + 3, bullets.length - 1);
   bullets[current].classList.remove('unhovered');
   bullets[current].classList.add('hovered');
   bullets[current].classList.remove('uncompleted');
   bullets[current].classList.add('completed');
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.progressbar{
   display:flex;
   justify-content:space-between;
   align-items:flex-end;
   width:90%;
   margin:0 auto;
   margin-bottom:40px;
  }
  .item{
   text-align:center;
   width:20%;
   position:relative;
  }
  .text{
   height:50px;
   margin:10px 0px;
   color:#000;
  }
  .bullet{
   height:20px;
   width:20px;
   display:inline-block;
   transition:background-color 500ms;
   line-height:20px;
  }
  .bullet.hovered{
   color:#fff;
   background-color:#0c8a43;
   bottom:10px;
   border:1px solid #0c8a43;
  }
  .bullet.unhovered{
   color:#000;
   background-color:#fff;
   bottom:10px;
   border:1px solid #000;
  }
  .bullet.uncompleted:after{
   content:'';
   position:absolute;
   bottom:80px;
   height:1px;
   width:calc(133% - 21px);
   background-color:#53565A;
   margin-left:7px;  
  }
  .bullet.completed:after{
   content:'';
   position:absolute;
   bottom:80px;
   height:1px;
   width:calc(133% - 21px);
   background-color:#0c8a43;
   margin-left:7px;  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="progressbar"&gt;
   &lt;div class="item"&gt;
    &lt;div class="bullet unhovered uncompleted"&gt;1&lt;/div&gt;
    &lt;div class="text"&gt;Hello Hello Hello&lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="item"&gt;
    &lt;div class="bullet unhovered uncompleted"&gt;2&lt;/div&gt;
    &lt;div class="text"&gt;Hello&lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="item"&gt;
    &lt;div class="bullet unhovered uncompleted"&gt;3&lt;/div&gt;
    &lt;div class="text"&gt;Hello&lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="item"&gt;
    &lt;div class="bullet unhovered"&gt;4&lt;/div&gt;
    &lt;div class="text"&gt;Hello&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;div onclick="previous();"&gt;Previous&lt;/div&gt;
  &lt;div onclick="next();"&gt;Next&lt;/div&gt;
  &lt;div onclick="randomto2();"&gt;Random to 2&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>