Question

I have this id validation field, i just need to know how i can make the validation and the keydown and keyup functions work on cloned inputs. also inserted data is carrying over to the duplicate fields.

js fiddle- http://www.jsfiddle.net/dawidvdh/xRh9v/

Heres the js:

$(document).ready(function() {
    idAmount = [0,1,2,3,4,5,6,7,8,9,10,12,13];
    var idinc =1;
    var id_val;

    jQuery(idAmount).each(function() {
        var index = "id"+idinc++;
        var id_input = "<input class='id' id="+'"'+index+'"'+" "+" maxlength='1' />";
        id_val = $(this).attr('value');
        jQuery(id_input).appendTo('#id');
    });

    $("#clone").click(function () {
        var clonedObj=$('#id').clone().insertAfter("#id");
        clonedObj.find('.id').each(function(){
           this.id='id' + idinc++;
        });
    });

function Validate() {
    jQuery('#error p').remove();

    var id_val = '';
    $('.id').each(function(){ id_val+=($(this).val());});
    var idNumber = id_val;
    console.log(id_val);
    var correct = true;

    if (idNumber.length != 13 || !isNumber(idNumber)) {
        correct = false;
    }

    var tempDate = new Date(idNumber.substring(0, 2), idNumber.substring(2, 4) - 1, idNumber.substring(4, 6));
    console.log(tempDate);
    var id_date = tempDate.getDate();
    var id_month = tempDate.getMonth();
    var id_year = tempDate.getFullYear();
    var currentYear = (new Date).getFullYear();
    var age = currentYear - id_year;
    var fullDate = id_date + "-" + (id_month + 1) + "-" + id_year;


    if (!((tempDate.getYear() == idNumber.substring(0, 2)) && (id_month == idNumber.substring(2, 4) - 1) && (id_date == idNumber.substring(4, 6)))) {
        correct = false;
    }

    // get the gender
    var genderCode = idNumber.substring(6, 10);
    var gender = parseInt(genderCode) < 5000 ? "Female" : "Male";

    // get country ID for citzenship
    var citzenship = parseInt(idNumber.substring(10, 11)) == 0 ? "Yes" : "No";

    // apply Luhn formula for check-digits
    var tempTotal = 0;
    var checkSum = 0;
    var multiplier = 1;
    for (var i = 0; i < 13; ++i) {
        tempTotal = parseInt(idNumber.charAt(i)) * multiplier;
        if (tempTotal > 9) {
            tempTotal = parseInt(tempTotal.toString().charAt(0)) + parseInt(tempTotal.toString().charAt(1));
        }
        checkSum = checkSum + tempTotal;
        multiplier = (multiplier % 2 == 0) ? 1 : 2;
    }
    if ((checkSum % 10) != 0) {
        correct = false;
    };

    // if no error found, hide the error message
    if (correct) {
        jQuery('.id').css("border","1px solid #9A8B7D");


        // clear the result div
        jQuery('#result').empty();
        // and put together a result message
        jQuery('#result').append('<p>South African ID Number:   ' + idNumber + '</p><p>Birth Date:   ' + fullDate + '</p><p>Gender:  ' + gender + '</p><p>SA Citizen:  ' + citzenship + '</p><p>AGE:  ' + age + '</p>');
        jQuery('#status').html("correct");
    }
    // otherwise, show the error
    else {
        jQuery('.id').css("border","1px solid #FF0000");
        jQuery('#status').html("incorrect")
    }

    return false;
}

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

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

$('input.id').on('keyup', function(){
    if (this.value.match(/\d+/)) {
        var $this = $(this);
        if ($this.next('input').length) {
          $this.next().focus();
        } else {
          Validate()
        }  
    }
});



    $(".id").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
             // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
             // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    });
});

HTML:

<div id="id">
<span id="label">ID NUMBER:</span>
<span id="status"></span>
    </div>
<button id="clone">clone</button>

<div id="result"> </div>

CSS:

#error {
    color: red;
    border: 1px solid red;
    padding: 5px;
    display: none;
}

#result {
    padding: 20px;
}

.id {
    width:16px;
    height:16px;
    border:1px solid #9A8B7D;
    margin:0;
    float:left;
    text-align:center;
    font-family:'itc_avant_garde_gothic_bookOb',Helvetica,sans-serif;
    font-size:11pt;
    padding:2px;
}
#label {
    float:left;
    font-family:'itc_avant_garde_gothic_bookOb',Helvetica,sans-serif;
    line-height:18px;
    font-size:11pt;
    margin-right:10px;
}

Answer 1

The only time that I see you call Validate is here :

$('input.id').on('keyup', function(){
    //code
});

and here

$('input.id').keydown(function(e){
    //code
}); 

Which means that the issue is the event handler is not delegated to a static element

$(document).on('keyup', 'input.id', function(){
    //code
});

$(document).on('keydown', 'input.id', function(){
    //code
});

Binding it to the document will ensure that any dynamically created elements will have the same event delegated to them as any static elements of the same selector.

Forgot the last part.

clonedObj.find('.id').each(function(){
   this.id='id' + idinc++;
   this.value = ''; //simply add this to remove the value
});

Although, because you’re using jQuery, you should try to stick to using jQuery.

clonedObj.find('.id').each(function(){
     $(this).prop('id', 'id'+ idinc++).val(''); // chain the commands
});