title: Animation effects not coming into play
body: <p>I am new to Web Development.
  Can anyone please tell me why my Javascript code is not showing any animation effects into the website. I am trying this from last 3 days and I am unable to get the solution.</p>
  <p>Please help me in getting this issue solved.</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var v = document.getElementById("booking-form").validate({
    rules: {
      bf_totalGuests: {
        required: true
      },
      bf_date: {
        required: true
      },
      bf_time: {
        required: true
      },
      bf_hours: {
        required: true
      },
      bf_fullname: {
        required: true
      },
      bf_email: {
        required: true,
        email: true
      }
  
    },
    errorElement: "span",
    errorClass: "error",
    errorPlacement: function(error, element) {
      error.insertBefore(element);
    }
  });
  
  document.getElementsByClassName("next-btn1").click(function() {
    if (v.form()) {
      document.getElementsByClassName("tab-pane").hide();
      document.getElementById("step2").fadeIn(1000);
      document.getElementsByClassName('progressbar-dots').removeClass('active');
      document.getElementsByClassName('progressbar-dots:nth-child(2)').addClass('active');
    }
  });
  document.getElementsByClassName("next-btn2").click(function() {
    if (v.form()) {
      document.getElementsByClassName("tab-pane").hide();
      document.getElementById("step3").fadeIn(1000);
      document.getElementsByClassName('progressbar-dots').removeClass('active');
      document.getElementsByClassName('progressbar-dots:nth-child(3)').addClass('active');
    }
  });
  
  document.getElementsByClassName("submit-btn").click(function() {
    if (v.form()) {
      document.getElementById("loader").show();
      setTimeout(function() {
        document.getElementById("booking-form").html("&lt;h2&gt;Your message was sent successfully. Thanks! We'll be in touch as soon as we can, which is usually like lightning (Unless we're sailing or eating tacos!).&lt;/h2&gt;");
      }, 1000);
      return false;
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=Merriweather:300|Oswald');
  
  /* Form fields */
  
  #booking-form {
    font-family: 'Merriweather', serif;
    max-width: 540px;
    margin: 40px auto;
  }
  
  #booking-form ul {
    padding-left: 0;
  }
  
  #booking-form li {
    list-style: none;
  }
  
  #booking-form input,
  #booking-form textarea,
  #booking-form select {
    font-size: 18px;
    padding: 0 28px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgb(233, 233, 233);
    text-align: left;
    border-radius: 35px;
    color: #000000;
    letter-spacing: normal;
    height: 50px;
    line-height: 50px;
    font-family: 'Merriweather', serif;
    background: #fff;
    margin-bottom: 20px;
  }
  
  #booking-form select {
    background: url('https://seashineadventures.com/wp-content/uploads/2017/08/grey-chevron.png') no-repeat;
    -webkit-appearance: none;
    appearance: none;
    background-size: 15px;
    background-position: 97% 50%;
  }
  
  #booking-form textarea {
    height: 120px;
    line-height: 1.5;
    padding: 15px 28px;
  }
  
  #booking-form input:focus,
  #booking-form textarea:focus,
  #booking-form select:focus {
    outline: 0;
    border: 1px solid rgb(211, 211, 211);
  }
  
  #booking-form label {
    font-size: 18px;
    font-weight: 300;
    display: block;
    margin-bottom: 10px;
  }
  
  
  /* Buttons */
  
  #booking-form .next-btn,
  #booking-form .submit-btn {
    background: #82CCC8;
    padding: 13px 20px;
    color: #fff;
    font-family: oswald, sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 1px;
    min-width: 400px;
    display: inline-block;
    text-align: center;
    font-weight: 400;
    border-radius: 0;
    border: 0;
    transition-property: background-color;
    transition-duration: 0.5s;
    width: 100%;
    cursor: pointer;
  }
  
  #booking-form .next-btn:hover,
  #booking-form .submit-btn:hover {
    background-color: #444b5d;
    color: #fff;
  }
  
  
  /* Progress Bar */
  
  .progress-wrap {
    margin: auto;
    display: table;
  }
  
  .line-progress-bar {
    display: flex;
    margin: auto;
    width: 100%;
  }
  
  .line {
    height: 1px;
    width: 250px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: rgb(217, 217, 217);
    position: absolute;
    margin-top: 8px;
  }
  
  .progress-wrap div ul {
    display: flex;
    width: 250px;
    list-style: none;
    padding: 0px;
    margin: initial;
    justify-content: space-between;
    z-index: 1;
  }
  
  .progressbar-dots {
    display: inline-flex;
    border: #949494 solid 4px;
    background: #333333;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #d4d4d4;
    font-size: 20px;
    margin-left: 0px;
    color: #d4d4d4;
    border: 0px solid rgb(217, 217, 217);
    background: rgb(217, 217, 217);
  }
  
  .progressbar-dots span {
    font-size: 12px;
    line-height: 12px;
    position: absolute;
    margin-top: 60px;
    /* width: 75px; */
    float: left;
    margin-left: -30px;
    display: none;
  }
  
  .progressbar-dots.active {
    color: #fff;
    border: 0px solid rgb(38, 163, 134);
    background: #82CCC8;
  }
  
  
  /*  Tab */
  
  .tab-pane {
    display: none;
  }
  
  .tab-pane:first-child {
    display: block;
  }
  
  
  /* Error */
  
  span.error {
    font-size: 12px;
    font-family: "helvetica neue", arial, sans-serif;
    color: #D6041D;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel="stylesheet" href="./placeOrder.css"&gt;
    &lt;!-- &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt; --&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;form action="#" id="booking-form"&gt;
  
      &lt;div class="tab-content"&gt;
        &lt;div class="tab-pane" id="step1"&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;label&gt;How many guests in your group?&lt;/label&gt;
              &lt;div class="errorTxt"&gt;&lt;/div&gt;
              &lt;select name="bf_totalGuests" required&gt;
                &lt;option value=""&gt;Select&lt;/option&gt;
                &lt;option value="1"&gt;1&lt;/option&gt;
                &lt;option value="2"&gt;2&lt;/option&gt;
                &lt;option value="3"&gt;3&lt;/option&gt;
                &lt;option value="4"&gt;4&lt;/option&gt;
                &lt;option value="5"&gt;5&lt;/option&gt;
                &lt;option value="6"&gt;6&lt;/option&gt;
                &lt;option value="7"&gt;7&lt;/option&gt;
                &lt;option value="8"&gt;8&lt;/option&gt;
                &lt;option value="9"&gt;9&lt;/option&gt;
                &lt;option value="10"&gt;10&lt;/option&gt;
                &lt;option value="11"&gt;11&lt;/option&gt;
                &lt;option value="12"&gt;12&lt;/option&gt;
                &lt;option value="More"&gt;More&lt;/option&gt;
              &lt;/select&gt;
            &lt;/li&gt;
            &lt;li style="list-style: none; display: inline"&gt;
              &lt;button class="next-btn next-btn1" type="button"&gt;Next&lt;/button&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="tab-pane" id="step2"&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;label&gt;Which date and time are you looking to book on?&lt;/label&gt;
              &lt;div class="errorTxt"&gt;&lt;/div&gt;
              &lt;input type="text" class="datepicker" name="bf_date"&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;label&gt;Which time of day?&lt;/label&gt;
              &lt;div class="errorTxt"&gt;&lt;/div&gt;
              &lt;select name="bf_time"&gt;
                &lt;option value=""&gt;Select&lt;/option&gt;
                &lt;option value="Morning"&gt;Morning&lt;/option&gt;
                &lt;option value="Midday"&gt;Midday&lt;/option&gt;
                &lt;option value="Late afternoon, ending with a sunset"&gt;Late afternoon, ending with a sunset
                &lt;/option&gt;
              &lt;/select&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;label&gt;How many hours would you like to charter for?&lt;/label&gt;
              &lt;div class="errorTxt"&gt;&lt;/div&gt;
              &lt;select name="bf_hours"&gt;
                &lt;option value=""&gt;Select&lt;/option&gt;
                &lt;option value="3"&gt;3&lt;/option&gt;
                &lt;option value="4"&gt;4&lt;/option&gt;
                &lt;option value="5"&gt;5&lt;/option&gt;
                &lt;option value="6"&gt;6&lt;/option&gt;
                &lt;option value="7"&gt;7&lt;/option&gt;
                &lt;option value="8"&gt;8&lt;/option&gt;
                &lt;option value="Overnight (24 hours)"&gt;Overnight (24 hours)&lt;/option&gt;
              &lt;/select&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;button class="next-btn next-btn2" type="button"&gt;Next&lt;/button&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="tab-pane" id="step3"&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;label&gt;What is your first and last name?&lt;/label&gt;
              &lt;div class="errorTxt"&gt;&lt;/div&gt;
              &lt;input type="text" name="bf_fullname"&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;label&gt;Which email address should we send your free estimate to?&lt;/label&gt;
              &lt;div class="errorTxt"&gt;&lt;/div&gt;
              &lt;input type="email" name="bf_email"&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;label&gt;Do you have any questions or a message? (Optional)&lt;/label&gt;
              &lt;textarea name="bf_message"&gt;&lt;/textarea&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;button class="submit-btn" type="submit"&gt;Request My Free Estimate&lt;/button&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="progress-wrap"&gt;
        &lt;div class="line-progress-bar"&gt;
          &lt;div class="line"&gt;&lt;/div&gt;
          &lt;ul class="checkout-bar"&gt;
            &lt;li class="progressbar-dots active"&gt;&lt;span&gt;step 1&lt;/span&gt;&lt;/li&gt;
            &lt;li class="progressbar-dots"&gt;&lt;span&gt;step 2&lt;/span&gt;&lt;/li&gt;
            &lt;li class="progressbar-dots"&gt;&lt;span&gt;Final step&lt;/span&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="loader" style="display: none;"&gt;
        &lt;img src="//d2erq0e4xljvr7.cloudfront.net/assets/img/ring.svg"&gt;
      &lt;/div&gt;
    &lt;/form&gt;
    &lt;script src="./placeOrder.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have even included all the libraries, where am I getting wrong. please guide me</p>