Toufik83: Clone a form using eq

by aburayane

HTML

<form id="frmImport" name="frmImport" method="post" enctype="multipart/form-data" >

<div class="origin" id="origin1">
  <div class="upImage" id="up1">
        <label for="file-input1">
            <img src="https://cdn3.iconfinder.com/data/icons/blackblue/128/iPhoto.png" id="file1">
        </label>
        <input id="file-input1" type="file"/>
    </div>
    <div class="upInfo">Info1</div>
</div>
        <div style="clear: both;"></div> 
        
        <br><br><br>
        <button class="newUp">New</button>
        
        </form>

CSS

/* Upload image Start */
.origin {
  width: auto;
  border: 1px solid gray;
  display: inline-block;
}

.upImage > input
{
    display: none;
}

.upImage img {
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.upImage{
    border: 2px dotted gray;
    width: 100px;
    height: 100px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    float: left;
    margin: 5px;
}
	
.upInfo{
    border: 0px solid gray;
    width: 90px;
    height: auto;
    float: left;
    margin: 10px;
    text-align: center;
    
}
/* Upload image EnD */

JavaScript

var incID = 1;

 $('body').on('click', '.newUp', function() {
 
 
   var cloned = $('.origin:first').clone(true);
   
   // count how many div
   var cDiv = $('.origin').length;
   //console.log(cDiv);
   
   $('.origin').eq(cDiv-1).after(cloned);
   
   incID++;

   cloned.closest('#origin1').attr('id', 'origin'+incID);
   cloned.find('#up1').attr('id', 'up'+incID);
   cloned.find('label').attr('for', 'file-input'+incID);
   cloned.find('#file1').attr('id', 'file'+incID);
   cloned.find('#file-input1').attr('id', 'file-input'+incID);
   cloned.find('.upInfo').text('Info'+incID);
   
   console.log(cloned);

	
  
   return false;
   
    });
    
   /*** Toufik83 example Start ***
   
   http://www.developpez.net/forums/d1623238/webmasters-developpement-web/javascript-ajax-typescript-dart/javascript/bibliotheques-frameworks/jquery/clone-d-formulaire/#post8868184
   
   
   
    
var incID = 1;
 $('body').on('click', '.newUp', function() {
 
   var cloned = $('.origin:first').clone(true);
   $(".origin")
     .eq(incID - 1)
     .after(cloned);
 
   cloned.find(".upImage").attr("id", "up" + parseInt(incID + 1))
     .find("input:file").attr("id", "file-input" + parseInt(incID + 1))
     .parent().find("img").attr("id", "file" + parseInt(incID + 1))
     .parents(".upImage").find(".txt1").text("Text " + parseInt(incID + 1));
   incID++;
   console.log(" cloned eq :" + cloned.index());
   return false;
 });
   
   

 
 /*** Toufik83 example EnD ***/