Skip to content

How to push down a after duplicating another?

I don’t know if my title can be understood clearly but what I’m aiming for is after I click a button, the div on top of the button will be duplicated directly below the original so the button will have to go down. I read about using position: absolute and position: relative but it seems that it does not work.

document.getElementById('parentDIV').style.position = 'relative';
document.getElementById('duplicetor1').style.position = 'absolute';
document.getElementById('buttons').style.position = 'absolute';
document.getElementById('duplicetor1').style.zIndex = '2';

The code above shows how I used JS to change the style of each div. This is the link to my whole code


You don’t need to “play” with positionig. Just place the cloned element before the buttons block.

Here an example of your duplicate function

function duplicate() {
  var clone = original.cloneNode(true);
  var btns = document.querySelector('.buttons-room'); = "duplicetor" + ++i;
  original.parentNode.insertBefore(clone, btns);