：eq Jquery，我似乎无法显示第一个之后的元素

$(document).ready(function() {

  var form = $('form');
  var stepCount = 0;
  var formCount = $('.z_window').length;
  $('body').append(stepCount);
  $(form).submit(function(e) {

    if (stepCount <= 3) {
      e.preventDefault();
      $('.z_window:eq(' + stepCount + ')').css({
        'left': '1000px',
        'right': '-1000px'
      });
      $('.z_window:eq(' + stepCount + 1 + ')').css({
        'left': '0px',
        'right': '0px'
      });
      $('head').append('<style>.z_progress_bar::before{width:66%;}</style>');
    }
    stepCount++;
  })
})

:root {
  --bar-color: rgba(229, 229, 229, 255);
  --progress-color: rgba(29, 62, 133, 255);
  --answer-color: rgba(29, 62, 133, 255);
  --border-color: rgba(99, 99, 99, 255);
}

.z_box {
  overflow: hidden;
  margin: auto;
  max-width: 500px;
  padding: 10px;
  position: relative;
  padding-bottom: 100px;
  min-height: 600px;
}

.z_logo {
  max-width: 500px;
  margin: 10px 0px
}

.z_logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.z_progress_text {
  display: block;
  margin-bottom: 20px;
  font-weight: 700;
  font-family: arial;
}

.z_progress_bar {
  display: block;
  min-height: 5px;
  max-width: 500px;
  background: var(--bar-color);
}

.z_progress_bar::before {
  transition: width 0.5s ease;
  content: '';
  display: block;
  min-height: 5px;
  background: var(--progress-color);
  border-radius: 5px;
  width: 33%;
}

.z_question_text {
  display: block;
  margin-top: 20px;
  margin-bottom: 40px;
}

.z_answer_container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.z_answer {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
}

.z_answer input[type='radio'] {
  display: none;
}

.z_answer input[type='radio']+label {
  cursor: pointer;
  color: var(--border-color);
  border: 2px solid var(--border-color);
  padding: 10px 30px;
  border-radius: 25px;
}

.z_answer input[type='radio']:checked+label {
  background: var(--answer-color);
  color: white;
  border-color: var(--answer-color)
}

.z_answer textarea,
.z_answer textarea:focus,
.z_answer textarea:active {
  outline: none!important;
  resize: none;
  color: var(--border-color);
  border: 2px solid var(--answer-color);
  padding: 10px 10px;
  border-radius: 25px;
}

.z_answer input[type="text"],
.z_answer input[type="text"]:focus,
.z_answer input[type="text"]:active {
  width: 100%;
  outline: none!important;
  resize: none;
  color: var(--border-color);
  border: 2px solid var(--answer-color);
  padding: 10px 10px;
  border-radius: 25px;
}

textarea::-webkit-scrollbar {
  opacity: 0;
}

;
.z_box {
  min-height: 500px;
  position: relative;
}

.z_submit {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.z_submit input[type="submit"] {
  background: var(--answer-color);
  border-radius: 25px;
  padding: 10px 30px;
  border-color: var(--answer-color);
  border-style: solid;
  color: white;
}

.z_window {
  left: 0;
  position: absolute;
  transition: all 0.5s ease;
}

.z_w2,
.z_w3 {
  right: 1000px;
  left: -1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="z_box">
  <div class="row">
    <div class="col-md-12">
      <div class="z_logo">
      </div>
    </div>
    <div class="col-md-12">
      <p class="z_progress_text">
        Let's start!
      </p>
    </div>
    <div class="col-md-12">
      <span class="z_progress_bar"><!----></span>
    </div>
    <form action="" method="post">

      <!-- Multiple Choice answer -->
      <div class="z_window z_w1">
        <div class="row">
          <div class="col-md-12">
            <div class="z_question_text">
              Your Favorite Time To Workout ?
            </div>
          </div>
          <div class="col-md-12">
            <div class="z_answer_container">
              <div class="z_answer">
                <input type="radio" name="answer" id="answer_1"><label for="answer_1">Dawn</label>
              </div>
              <div class="z_answer">
                <input type="radio" name="answer" id="answer_2"><label for="answer_2">Pre Work</label>
              </div>
              <div class="z_answer">
                <input type="radio" name="answer" id="answer_3"><label for="answer_3">Post Work</label>
              </div>
              <div class="z_answer">
                <input type="radio" name="answer" id="answer_4"><label for="answer_4">Midnight</label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="z_window z_w2">
        <div class="row">
          <div class="col-md-12">
            <div class="z_question_text">
              Your Favorite Time To Workout ?
            </div>
          </div>
          <div class="col-md-12">
            <div class="z_answer_container">
              <div class="z_answer">
                <textarea name="answer" id="answer" cols="60" rows="4" autofocus>
                                        
                                    </textarea>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="z_window z_w3">
        <div class="row">
          <div class="col-md-12">
            <div class="z_question_text">
              Your Favorite Time To Workout ?
            </div>
          </div>
          <div class="col-md-12">
            <div class="z_answer_container">
              <div class="z_answer">
                <input type="text" name="answer" id="answer">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="z_submit">
        <input type="submit" value="Next">
      </div>
    </form>
  </div>
</div>