Javascript add textfield button doesn't work properly

Question

I have made the following code

HTML:

<form method="post" id="myemailform" name="myemailform" action="form-to-email.php">
    <div id="form_container">
        <label class="description" for="pax">Number:</label>
        <div>
            <select class="select small" id="pax" name="pax">
                <option value="" selected="selected"></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
                <option value="32">32</option>
                <option value="33">33</option>
                <option value="34">34</option>
                <option value="35">35</option>
                <option value="36">36</option>
                <option value="37">37</option>
                <option value="38">38</option>
                <option value="39">39</option>
                <option value="40">40</option>
            </select>
        </div>
        <label class="description">ID:</label>
        <input type='text' id="idpl" class="id-text-len" name='ids1' placeholder="ID #1">
        <input class="btn btn-primary" type='button' id='btnMore' value='Add Ids'>
</form>

js:

jQuery(function ($) {

    $('#btnMore').click(function () {
        var form, fields, newField;

        var e = document.getElementById("pax");
        var strUser = e.options[e.selectedIndex].text;

        form = $("#myemailform");
        for (var i = 1; i < strUser; i++) {
            fields = form.find("input[name^='ids']");
            newField = $(fields[0]).clone();
            newField.attr('name', 'ids' + (fields.length + 1));
            newField.attr('placeholder', 'ID #' + (fields.length + 1));
            newField.insertAfter(fields.last());
        }
    });

});

You can see the jsfiddle .

What i want is when i click on the button to add fields, not add more on the existing but new.

I mean eg first time i click 10 and then add, as a results i'll get 10 textfields. Then if i click 14 i don't want to get 10+14=24 textfields but 4 more, i want 14textfields.

I haven't made it up to do that. Please someone help me by code, in general i know why that's happening but i don't know how to solve that.

Answer 1

Try

jQuery(function($) {
    var form = $("#myemailform");;

    $('#btnMore').click(function() {
        var fields, newField;

        var opt = parseInt($('#pax').val());
        var len = opt - $('.id-text-len').length;

        if(len> 0){
            for (var i = 0; i < len; i++) {
                fields = form.find(".id-text-len");
                newField = $(fields[0]).clone();
                newField.attr('name', 'ids' + (fields.length + 1));
                newField.attr('placeholder', 'ID #' + (fields.length + 1));
                newField.val('');
                newField.insertAfter(fields.last());
            }
        } else {
            form.find(".id-text-len:gt("+ (opt - 1) +")").remove()
        }
    });

});

Demo: Fiddle

Answer 2

how about this

http://jsfiddle.net/7QUea/3/

i think this is the one you need

just one more line

$("input[name^='ids']").not("input[name='ids1']").remove();


jQuery(function($) {

   $('#btnMore').click(function() {
      $("input[name^='ids']").not("input[name='ids1']").remove();
         var form, fields, newField;
         var e = document.getElementById("pax");
         var strUser = e.options[e.selectedIndex].text;

         form = $("#myemailform");
         for (var i = 1; i < strUser; i++) {
         fields = form.find("input[name^='ids']");
         newField = $(fields[0]).clone();
         newField.attr('name', 'ids' + (fields.length + 1));
         newField.attr('placeholder', 'ID #' + (fields.length + 1));
         newField.insertAfter(fields.last());}
                            });
   });

Answer 3

Changed a few things (now it is more jQuery styled):

jQuery(function ($) {
    $('#btnMore').click(function () {
        var strUser = $("#pax").val();       
        var form = $("#myemailform");        
        var fields = form.find("input[name^='ids']");    
        for (var i = 0; i < (strUser - fields.length); i++) {
            var newField = $(fields[0]).clone();
            newField.attr('name', 'ids' + (fields.length + 1 + i));
            newField.attr('placeholder', 'ID #' + (fields.length + 1 + i));        
            form.find("input[name^='ids']").last().after(newField);
        }
    });
});

Check here: http://jsfiddle.net/7QUea/4/