title: Hide and show input fields with onclick or similar function
body: <p>I have multiple input fields. I only want one to show at a time. When the user is done entering information and hits next button it will hide the first input and show the second input. when they hit next again it will hide the second input and show the third input and so on. I've tried hiding the div and input fields directly  with hide()/show() JQuery functions but but can't seem to get them to work. Here's a basic example of the structure i'm using, any input is greatly appreciated. </p>
  
  <p>Edit: Updated the JSBIN and sample code to the method i've tried to get working. </p>
  
  <pre><code>JSBIN: http://jsbin.com/wixiyaraxi/edit?html,output
  
  
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width"&gt;
        &lt;title&gt;JS Bin&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;!-- // should be VISABLE at the start and be HIDDEN when Next button is clicked. --&gt;
      &lt;div id="test1"&gt;
      &lt;input type="text" id="test1" class="form-control" placeholder="Input 1:"&gt;
      &lt;/div&gt;
  
      &lt;!-- // should be HIDDEN at the start and be VISABLE when Next button is clicked. --&gt;
      &lt;!-- // when the Next button is clicked a second time should be HIDDEN.--&gt;
      &lt;div id="test2"&gt;
      &lt;input type="text" id="test2" class="form-control" placeholder="Input 2:"&gt;  
      &lt;/div&gt;
  
      &lt;!-- // should be hidden at the start and show when Next button is clicked a second time. --&gt;
      &lt;div id="test3"&gt;
      &lt;input type="text" id="test3" class="form-control" placeholder="Input 3:"&gt;  
      &lt;/div&gt;
  
  
      &lt;button type="button" class="btn btn-warning"&gt;Next&lt;/button&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  
  &lt;script&gt;
  
  $("#button").click(function(){
      $("#test1").hide();
      $("#test2").show();
  })
  &lt;/script&gt;
  </code></pre>