Show input text fields according to number entered

[nadiam]

Hi, so i have an input text <input type="text" name="numguest" id="number-of-guests"> and a button Okay. When a number say, 4 is entered into that text box and clicked okay, 4 of this text box <input type="text" name="guest-name[]" placeholder="Guest Name" id="text-gname"> will appear.

i tried:

$("#okay").on("click", function(){
      var num_of_guests = $("#number-of-guests").val();
      alert(num_of_guests);
      var input_text = $("#text-gname").clone();
      var target = $(".guests-tbody");
      for(var i = 0; i < num_of_guests; i++)
      {
        var clone = input_text.clone();
        clone.attr('id','style', '');
        target.append(clone);
        Hide();
      }
    });

but nothing seems to be happening except fot the alert and Hide function. TIA

[Traevel]

Apart from the Hide() it's working here. You're making a clone of clone though, and var target = $(".guests-tbody"); is technically a list of elements, so it will append to all the elements with that class. Not sure if clone.attr('id','style', ''); is doing what you think it's doing; it sets id to "style". You could use clone.attr({"id":"","style":""}); instead if you want id and style attributes empty for the clone.

[nadiam]

thank you

Hi nadiam,

Check out below jsbin:

http://jsbin.com/dodeve/11/edit?html,js,output

Hope this is what you needed.