javascript - Jquery create multiple input fields by writing a value but display each set of input fields one at a time -

i'm working on creating "configurator".

a user enter number of configurations want hold 3 input fields in each set.

if user wants 5 configurations , clicks create. "configurator" create 5 different sets of input fields each set having 3 input fields.

however, display each configuration 1 @ time.

after user enters number of configurations desired. should show first set ask if move onto next , on.

please see current code: http://jsfiddle.net/jdarville/wsyzd1bu/

 <div class='row' id="inputcontainer">     <div class="form-group clearfix t" >         <div class="col-md-2 col-md-offset-2">             <div class="form-text-field first-name">                 <label>first name</label>                 <input type="text" id="firstname10" class="signup-input" name="" placeholder="">             </div>         </div>         <div class="col-md-2">             <div class="form-text-field last-name">                 <label>last name</label> <input type="text" id="lastname0" class="signup-input" name="" placeholder="optional">             </div>         </div>         <div class="col-md-4">             <div class="form-text-field email">                 <div>                 <label>email</label> <input type="text" data-index="0" id="inputmail0" class="signup-input text-value add" name="email[0]"  placeholder=""/>                 <span class="common-sprite disnone sign-up-cross first"></span>                 </div>             </div>         </div>     </div>  </div>   <button type="button" id="more" name="more">create more</button> <script> $("#more").click(".add",function(){    $("#inputcontainer").append("<br />"); $("#inputcontainer").append("first name <input type='text' class='signup-input' name='' placeholder='' /><br />"); $("#inputcontainer").append("last name <input type='text' class='signup-input' name='' placeholder='optional' /><br />"); $("#inputcontainer").append("email address <input type='text'   data-index='0' class='signup-input text-value add' name='email[0]'      placeholder='' /><br />"); })</button>    </script> 

the current code creates 3 input fields button click described above, user first enter number of desired configurations display each set 1 @ time.

you want wrap in function , inside function want (for sanity , result checkings sake) make sure each element unique. assuming know how , need on logic on turning loop, here code modified started. scroll bottom , click run code snippet. have fun!

function createmore(){      var num = $('#num').val();      for( var = 0; < num; i++ ) {          $("#inputcontainer").append("first name <input type='text' class='signup-input' name='' placeholder='' /><br />");          $("#inputcontainer").append("last name <input type='text' class='signup-input' name='' placeholder='optional' /><br />");          $("#inputcontainer").append("email address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]'  placeholder='e.g. example@url.com' /><br />");      }  }  $("#more").click(".add",createmore);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class='row' id="inputcontainer">          <div class="form-group clearfix t" >              <div class="col-md-2 col-md-offset-2">                  <div class="form-text-field first-name">                      <label>first name</label>                      <input type="text" id="firstname10" class="signup-input" name="" placeholder="">                  </div>              </div>              <div class="col-md-2">                  <div class="form-text-field last-name">                      <label>last name</label>                      <input type="text" id="lastname0" class="signup-input" name="" placeholder="optional">                  </div>              </div>              <div class="col-md-4">                  <div class="form-text-field email">                      <div>                      <label>email</label>                      <input type="text" data-index="0" id="inputmail0" class="signup-input text-value add" name="email[0]"  placeholder="e.g. example@url.com"/>                      <span class="common-sprite disnone sign-up-cross first"></span>                      </div>                  </div>              </div>          </div>      </div>  <hr>  # <input type="text" id="num" name="more" value='2'><br>  <button type="button" id="more" name="more">create more</button>