:eq Jquery, I can't seem to show the elements after first one-CodePudding

I've spent 3 hours trying to do this, I can only show the second question but anything after that doesn't appear.

$(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 >
  <div >
    <div >
      <div >
      </div>
    </div>
    <div >
      <p >
        Let's start!
      </p>
    </div>
    <div >
      <span ><!----></span>
    </div>
    <form action="" method="post">

      <!-- Multiple Choice answer -->
      <div >
        <div >
          <div >
            <div >
              Your Favorite Time To Workout ?
            </div>
          </div>
          <div >
            <div >
              <div >
                <input type="radio" name="answer" id="answer_1"><label for="answer_1">Dawn</label>
              </div>
              <div >
                <input type="radio" name="answer" id="answer_2"><label for="answer_2">Pre Work</label>
              </div>
              <div >
                <input type="radio" name="answer" id="answer_3"><label for="answer_3">Post Work</label>
              </div>
              <div >
                <input type="radio" name="answer" id="answer_4"><label for="answer_4">Midnight</label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div >
        <div >
          <div >
            <div >
              Your Favorite Time To Workout ?
            </div>
          </div>
          <div >
            <div >
              <div >
                <textarea name="answer" id="answer" cols="60" rows="4" autofocus>
                                        
                                    </textarea>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div >
        <div >
          <div >
            <div >
              Your Favorite Time To Workout ?
            </div>
          </div>
          <div >
            <div >
              <div >
                <input type="text" name="answer" id="answer">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div >
        <input type="submit" value="Next">
      </div>
    </form>
  </div>
</div>

P.S: This is my work account so I can't reply if I'm not at work.

This is the outdated code that I felt was pretty close to the solution but I gave up here and went to static solution with

If

but that won't work incase there are 3 questions.

The questions come from database so there's no fixed number of them.

CodePudding user response：

The problem is that you're doing string concatenation, not addition, when you write

'.z_window:eq('   stepCount   1   ')'

The operator is left-associative, so first it does '.z_window:eq(' stepCount, then it concatenates 1 to that, and then concatenates ) to that. So if stepCount is 1, the result of this is

.z_window:eq(11)

You need to put stepCount 1 in parentheses to force that to be addition rather than concatenation.

You can also simplify this by using template literals.

$(`.z_window:eq(${stepCount   1})`)

Or you can use the .eq() method:

$('.z_window').eq(stepCount   1)

This is preferrable because the :eq selector has been deprecated in jQuery 3.4.