1_data.html

<div class="row">
  <div class="col-xs-12">
    <ul class="wizard-steps">
      <li class="selected">
        <a href="javascript:void(0);">
          <span class="fa fa-user" aria-hidden="true"></span>
          <span>Personal Particulars</span>
        </a>
      </li>
      <li>
        <span class="fa fa-wrench" aria-hidden="true"></span>
        <span>Skills & Qualifications</span>
      </li>
      <li>
        <span class="fa fa-user" aria-hidden="true"></span>
        <span>Background Check</span>
      </li>
      <li>
        <span class="fa fa-lock" aria-hidden="true"></span>
        <span>Submit Documents</span>
      </li>
      <li>
        <span class="fa fa-file-text-o" aria-hidden="true"></span>
        <span>Information Declaration</span>
      </li>
    </ul>
  </div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="title-form-personal">Please fill in your personal particulars below.</div>
<form action="#" class="about-info personal">
<ul class="clearfix">
  <li>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="">
  </li>
  <li class="clearfix">
    <label for="Nationality">Nationality</label>
    <select name="Nationality" id="Nationality">
      <option value="0" selected>Singaporean</option>
      <option value="1">1</option>
    </select>
  </li>
  <li>
    <label for="number-NRIC">NRIC</label>
    <input type="text" name="number-NRIC" id="number-NRIC" placeholder="S1394942Z">
  </li>
  <li class="half">
    <ul>
      <li>
        <label>Date Of Birth</label>
        <ul class="clearfix birthday">
          <li>
            <select name="date-of-birth" id="select1">
              <option value="0" selected>01</option>
              <option value="1">02</option>
              <option value="2">03</option>
              <option value="3">04</option>
            </select>
          </li>
          <li>
            <select name="month-of-birth" id="select2">
              <option value="0" selected>01</option>
              <option value="1">02</option>
              <option value="2">03</option>
              <option value="3">04</option>
            </select>
          </li>
          <li>
            <select name="year-of-birth" id="select3">
              <option value="0" selected>1957</option>
              <option value="1">1958</option>
              <option value="2">1959</option>
              <option value="3">1960</option>
            </select>
          </li>
        </ul>
      </li>
      <li>
        <label for="gender">Gender</label>
        <select name="gender" id="gender">
          <option value="0" selected>Male</option>
          <option value="1">Female</option>
        </select>
      </li>
    </ul>
  </li>
  <li class="half">
    <ul>
      <li>
        <label for="weight">Weight</label>
        <input type="text" name="weight" id="weight" placeholder="KG">
      </li>
      <li>
        <label for="height">Height</label>
        <input type="text" name="height" id="height" placeholder="CM">
      </li>
    </ul>
  </li>
  <li class="half">
    <ul>
      <li>
        <label for="religion">Religion</label>
        <select name="religion" id="religion">
          <option value="0" selected>Buddhism</option>
          <option value="1">1</option>
        </select>
      </li>
      <li>
        <label for="race">Race</label>
        <select name="race" id="race">
          <option value="0" selected>Chinese</option>
          <option value="1">1</option>
        </select>
      </li>
    </ul>
  </li>
  <li class="half">
    <ul>
      <li>
        <label for="contact_no">Contact No.</label>
        <input type="text" name="contact_no" id="contact_no" placeholder="HOME">
      </li>
      <li>
        <input type="text" name="hp" id="hp" placeholder="HP">
      </li>
    </ul>
  </li>
  <li>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="">
  </li>
  <li class="half">
    <ul>
      <li>
        <label for="postal">Postal Code</label>
        <input type="text" name="postal" id="postal" placeholder="478202">
      </li>
      <li>
        <label for="unit">Unit No.</label>
        <input type="text" name="unit" id="unit" placeholder="CM">
      </li>
    </ul>
  </li>
  <li class="half">
    <ul>
      <li>
        <label for="block">Block No.</label>
        <input type="text" name="block" id="block" placeholder="478202">
      </li>
      <li>
        <label for="street">Street</label>
        <input type="text" name="street" id="street" placeholder="Choa Chu Kang Ave 10">
      </li>
    </ul>
  </li>
</ul>
<p>Language(s) that you are able to speak fluently</p>
<ul class="check-list clearfix">
  <li>
    <label>
      <input type="checkbox" name="language" value=""/><span></span> English
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" name="language" value=""/><span></span> Mandarin
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" name="language" value=""/><span></span> Malay
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" name="language" value=""/><span></span> Tamil
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" name="language" value=""/><span></span> Hokkien
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" name="language" value=""/><span></span> Teochew
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" name="language" value=""/><span></span> Cantonese
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" name="language" value=""/><span></span> Hakka
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" name="language" value=""/><span></span> Hainanese
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" name="language" value=""/><span></span> Others
    </label>
  </li>
</ul>
<p>Are you suffering from any medical conditions, including neck and back problem?</p>
<ul class="check-question clearfix">
  <li>
    <label>
      <input type="radio" name="language" value=""/><span></span> No
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="language" value=""/><span></span> Yes, please specify :
    </label>
    <input type="text" name="specify" id="specify">
  </li>
</ul>
<p>Do you have a smart phone?</p>
<ul class="check-question clearfix">
  <li>
    <label>
      <input type="radio" name="language" value=""/><span></span> No
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="language" value=""/><span></span> Yes
    </label>
  </li>
</ul>
</form>
<div class="clearfix">
  <a href="2_data.html" class="submit btn-main btn-next">Next</a>
</div>
</div>
</div>

<script>
  $(".submit").click(function(e){
    e.preventDefault();
    var link = $(this).attr("href");

    $.get( link, function( data ) {
      $('html, body').animate({
        scrollTop: $(".update-details").offset().top
      }, 1000);

      setTimeout(function(){
        $(".wizard-frame").fadeOut(function(){
          $(".wizard-frame").html( data).fadeIn();
        })
      }, 1000);

    });

  });
</script>