Cloning an element in the DOM

Question

I have this piece of code that every time you click on the .btn-add-email button another input email is added below the previous and then stops adding till it gets to 5..It works fine in all browsers but not ie7 or ie8. So not sure if the clone method just does not work in ie8 or less. It throws no errors. Here is the code.

/*------------------------------------*\
= THANK YOU FOR ENTERING FORM
\*------------------------------------*/

var addEmail = $('.btn-add-email');
var clickSend = $('#email-modal-send');
var value = $.trim($('.addEmail input').val());

var parentDiv = $('.addEmail');
var i = $('#to-email').size() + 1;
var c = 0;

$('.btn-add-email').live('click', function(e) {
  e.preventDefault();
  for(i; i<6; i++) {
    $('#to-email').clone().attr('id', 'to-email'+(++c)).insertAfter('#first-email-input');
    i++;
    return false;
  }  
  clickSend.click(function(){
    if( value.length === 0 ||  value.length === "" )
      {
       $('.addEmail input').addClass('parsley-error');
       // return true;
      } else {
        $('.addEmail input').removeClass('parsley-error');
      }
  });
});

Answer 1

It can depend on the version of jQuery you are using. Version 2.x dropped support for "older" browsers, specifically IE. If you need support for them, ensure that you are using the 1.10 branch.