javascript - How to push down a <div> after duplicating another <div>?

Question

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 https://jsfiddle.net/rickiestrick/9cpbs0hm/4/.

question from:https://stackoverflow.com/questions/65920621/how-to-push-down-a-div-after-duplicating-another-div

Answer 1

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');
  clone.id = "duplicetor" + ++i;
  original.parentNode.insertBefore(clone, btns);
}