title: JS/jQuery - first click ignores first animation, every other click works properly
body: <p>I built this slider, but when I run it on a page, the first click doesn't trigger the first animation.
  It triggers the second animation and every other click after that triggers both animations properly.
  What am I missing with the first click?</p>
  
  <pre><code>// SLIDER
  
  $(".dot").click(function(){
  
    let currentId = ($(".dot-active").attr("id")[$(".dot-active").attr("id").length - 1]);
    let nextId = event.target.id[(event.target.id).length - 1];
  
    $(".dot-active").removeClass("dot-active");
    $("#" + event.target.id).addClass("dot-active");
  
    if(Number(currentId) != Number(nextId)){
      if(Number(currentId) &lt; Number(nextId)){
        $("#slide" + currentId).hide("slide", { direction: "left" }, 350);
      } else {
        $("#slide" + currentId).hide("slide", { direction: "right" }, 350);
      };
      $("#slide" + currentId).removeClass("slide-active");
      $("#slide" + currentId).addClass("slide-inactive");
  
  
      if(Number(currentId) &lt; Number(nextId)){
        $("#slide" + nextId).show("slide", { direction: "right" }, 350);
      } else {
        $("#slide" + nextId).show("slide", { direction: "left" }, 350);
      };
      $("#slide" + nextId).removeClass("slide-inactive");
      $("#slide" + nextId).addClass("slide-active");
    };
  });
  </code></pre>
  
  <p>made a test version in codepen here: <a href="https://codepen.io/Jankko/pen/ZEEEJxL" rel="nofollow noreferrer">https://codepen.io/Jankko/pen/ZEEEJxL</a></p>