Clone a form

by aburayane

HTML

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

<div class="origin">
  <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 class="txt1">Text1</div>
    </div>
    
</div>

<div class="newUps"></div>

        <div style="clear: both;"></div> 
        
        <br><br><br>
        <button class="newUp">New</button>
        
        </form>

CSS

/* Upload image Start */
.upImage > input
{
    display: none;
}

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

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

JavaScript

//$('.newUp').on('click', function(){

$('body').on('click', '.newUp', function(){


// get last id
var lastID	= $('#frmImport input:file').length;
//console.log(lastID);

// increment by 1
var incID	= lastID + 1;
//console.log(incID);

var original = $('#up1').parent();
//console.log(original);

// make clone
var cloned = $('.origin').children().clone(true);
//var cloned = $('.origin').clone(true);
//var cloned = $('#up1').before('.origin').clone();
//console.log(cloned);

var newCloned = $(cloned).each(function(x, y){
	//console.log(y);
  
  // we need to attribute new ids for the y
  $('#up1', y).attr('id', 'up'+incID);
	$('#file1', y).attr('id','file'+incID);
	$('#file-input1', y).attr('id','file-input'+incID);
	$('label', y).attr('for','file-input'+incID);
	$('.txt1', y).attr('class', 'txt'+incID);
	$('.txt'+incID, y).text('Text'+incID);

});

console.log(newCloned);

//$('.newUps').html(newCloned);


console.log('#up'+lastID);

//newCloned.insertAfter('.origin');
newCloned.insertAfter('#up'+lastID);

        return false;
});