jquery cloning elements with incrementing id
<p>I'm busy with a form that needs to have an option to duplicate certain fields as many times as the user click, then also it needs to be E-Mailed off, therefore I'm currently on the passport field. </p>

<p>The only problem is, the way i set it up is that for each div element with the class off "passport" it creates an input field. So now where the fields ids are: </p>

<p>1 2 3 4 5 6 7 8 9 10 11 12 13</p>

<p>and when i use jQuery clone:</p>

<p>1 2 3 4 5 6 7 8 9 10 11 12 13 1 2 3 4 5 6 7 8 9 10 11 12 13</p>

<p>and what i need it to be:</p>

<p>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23</p>

<p>but then how do i assign only the first set of ids to be associated with that one input, for it evaluates the value of the fields.</p>

<p>Anyways, Any help/advice greatly Appreciated.</p>

<p>Heres the jsfiddle: <a href="http://jsfiddle.net/dawidvdh/A5naZ/" rel="nofollow">http://jsfiddle.net/dawidvdh/A5naZ/</a></p>

<p>Heres the code:</p>

<p>jQuery:</p>

<pre><code>    $(document).ready(function() {
    var pass = 1;
    val = 0;
jQuery('div.passport').each(function() {
    var index = "pass"+pass++;
    var passer = "&lt;input class='pass' id="+'"'+index+'"'+" "+" maxlength='1' /&gt;";
    var passvalue = $(this).attr('value');
    jQuery(passer).appendTo('#pass');
});

$("#clone").click(function () {
    $('#pass').clone().insertAfter("#pass");
});

function Validatepass() {
    var passValue = '';
    $('.pass').each(function(){ passValue+=($(this).val());});    
    jQuery('#error p').remove();
    var error = jQuery('#error');
    var passNumber = passValue;
    var correct = true;
    if (passNumber.length != 13) {
        correct = false;
    }
    // if no error found, hide the error message
    if (correct) {
        jQuery('.pass').css("border","1px solid #9A8B7D");
    }
    // otherwise, show the error
    else {
        jQuery('.pass').css("border","1px solid #FF0000");
    }
    return false;
}

$('input.pass').keydown(function(e){
    if(e.keyCode == 8){
        $(this).val('');
        $(this).prev().val('');
        $(this).prev().focus();
         Validatepass();
    }
});  

$('input.pass').on('keyup', function(){
    if (this.value.match(/\d+/)) {
        var $this = $(this);
        if ($this.next('input').length) {
          $this.next().focus();
        } else {
          Validatepass();
        }  
    }
});
});
</code></pre>

<p>and the HTML:</p>

<pre><code>&lt;div id="pass"&gt;&lt;/div&gt;
&lt;div class="passport"&gt;&lt;/div&gt;
&lt;div class="passport"&gt;&lt;/div&gt;
&lt;div class="passport"&gt;&lt;/div&gt;
&lt;div class="passport"&gt;&lt;/div&gt;
&lt;div class="passport"&gt;&lt;/div&gt;
&lt;div class="passport"&gt;&lt;/div&gt;
&lt;div class="passport"&gt;&lt;/div&gt;
&lt;div class="passport"&gt;&lt;/div&gt;
&lt;div class="passport"&gt;&lt;/div&gt;
&lt;div class="passport"&gt;&lt;/div&gt;
&lt;div class="passport"&gt;&lt;/div&gt;
&lt;div class="passport"&gt;&lt;/div&gt;
&lt;div class="passport"&gt;&lt;/div&gt;
&lt;button id="clone"&gt;duplicate&lt;/button&gt;
</code></pre>
