jQuery question:Click through questions hiding the previous one each time

JavaScript
1

I have 5 questions that I want to click through. I only want one question on the page at a time. There are back and next buttons below each question. But the jQuery I have worked on the first question, but fails after that. What am I doing wrong?

HTML and jquery code here

<div id="one">
  <span>What is your first name?</span>
  <div>
    a href="#" id="back">back</a>
    a href="#" id="next">Next</a>
  </div>
</div>

<div id="two">
  <span>What is your last name?</span>
  <div>
    a href="#" id="back">back</a>
    a href="#" id="next">Next</a>
  </div>
</div>

<div id="three">
  <span>How old are you?</span>
  <div>
    a href="#" id="back">back</a>
    a href="#" id="next">Next</a>
  </div>
</div>

<div id="four">
  <span>What is your favourite colour?</span>
  <div>
    a href="#" id="back">back</a>
    a href="#" id="next">Next</a>
  </div>
</div>
jQuery

<script src="jquery.js"></script>
<script>  
  $(document).ready(function () {
    $("#two").hide();
    $("#three").hide();
    $("#four").hide();
    $("#next").click(function () {
      $("#one").hide();
      $("#two").show();
    });
  });
  $(document).ready(function () {
    $("#next").click(function () {
      $("#two").hide();
      $("#three").show();
    });
  });
</script>

edit:can someone help me?

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.