Clone selected element

Question

I'm working a simple app that move an element inside an element. The code is working fine, I just want to make a clone of the circles so that I can place same element on different boxes.

I tried to add this line

$( selectedChip ).clone().after( selectedChip );

so that every time I click on the squares the clone element will be inserted and the original stays.

Hope you help me.

thanks.

 var selectedCircle = null; $(".circle").click(function() { $(this).addClass('selected').siblings().removeClass('selected').animate({ top: 0, left: 0 }); selectedCircle = $(this); }); $(".container .square").click(function() { // $( selectedChip ).clone().after( selectedChip ); if (selectedCircle) { var selectedSquare = $(this); selectedSquare.addClass("selected"); var xOffset = (selectedSquare.width() - selectedCircle.width()) / 2; var yOffset = (selectedSquare.height() - selectedCircle.height()) / 2; selectedCircle.animate({ top: selectedSquare.offset().top - selectedCircle.offset().top + yOffset, left: selectedSquare.offset().left - selectedCircle.offset().left + xOffset }, 1200); } }); 

 .container{ height: 200px; width: 550px; background-color: #eee; padding: 10px; position: relative; border: 1px solid #DDD; } .round{ position: absolute; bottom: 10px; } .square{ cursor: pointer; display: inline-block; width: 50px; height: 50px; border: 1px solid #f60; position: relative; } .square:nth-child(2){ width: 65px; } .square:nth-child(3){ width: 75px; } .square:nth-child(4){ width: 85px; } .square:nth-child(5){ width: 95px; } .square:nth-child(6){ width: 105px; } .square:nth-child(7){ width: 115px; } .square:nth-child(8){ width: 125px; } .square .circle{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .circle{ cursor: pointer; display: inline-block; width: 45px; height: 45px; border: 1px solid green; border-radius: 100px; text-align: center; position: relative; } .circle span{ width: 10px; height: 20px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .circle.selected{ background-color: #FFFF; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="box"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <div class="round"> <div class="circle"> <span>1</span> </div> <div class="circle"> <span>2</span> </div> <div class="circle"> <span>3</span> </div> <div class="circle"> <span>4</span> </div> </div> </div> 

Answer 1

 var selectedCircle = null; $(".circle").click(function() { $(this).addClass('selected').siblings().siblings('.clone').remove(); $(this).addClass('selected').siblings().removeClass('selected').animate({ top: 0, left: 0 }); selectedCircle = $(this); }); $(".container .square").click(function() { if (selectedCircle) { var selectedSquare = $(this); debugger; var selectedCircleClone = selectedCircle.clone().addClass("clone"); selectedCircle.after(selectedCircleClone); selectedSquare.addClass("selected"); var xOffset = (selectedSquare.width() - selectedCircleClone.width()) / 2; var yOffset = (selectedSquare.height() - selectedCircleClone.height()) / 2; selectedCircleClone.animate({ top: selectedSquare.offset().top - selectedCircleClone.offset().top + yOffset, left: selectedSquare.offset().left - selectedCircleClone.offset().left + xOffset }, 1200); } }); 

 .container { height: 200px; width: 550px; background-color: #eee; padding: 10px; position: relative; border: 1px solid #DDD; } .round { position: absolute; bottom: 10px; } .square { cursor: pointer; display: inline-block; width: 50px; height: 50px; border: 1px solid #f60; position: relative; } .square:nth-child(2) { width: 65px; } .square:nth-child(3) { width: 75px; } .square:nth-child(4) { width: 85px; } .square:nth-child(5) { width: 95px; } .square:nth-child(6) { width: 105px; } .square:nth-child(7) { width: 115px; } .square:nth-child(8) { width: 125px; } .square .circle { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .circle { cursor: pointer; display: inline-block; width: 45px; height: 45px; border: 1px solid green; border-radius: 100px; text-align: center; position: relative; } .circle span { width: 10px; height: 20px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .circle.selected { background-color: #FFFF; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="box"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <div class="round"> <div class="circle"> <span>1</span> </div> <div class="circle"> <span>2</span> </div> <div class="circle"> <span>3</span> </div> <div class="circle"> <span>4</span> </div> </div> </div> 

Answer 2

$( selectedChip ).clone().after( selectedChip ); does the following:

1. Select selectedChip
2. clone s it.
3. appends selectChip right after the clone.

At no point is the cloned object output to the page.

Keep in mind that clone returns a new jQuery object, but doesn't put it anywhere on the DOM.

A quick fix would be:

//Copy the selected chip.
$copy = $(selectedChip).clone();
//Append the copy to the DOM right after the selected chip.
$(selectedChip).after($copy);
//If you're into one liners:
$(selectedChip).after($(selectedChip).clone());

See also: jQuery duplicate DIV into another DIV