Как добавить дубликат div над кнопкой, а не ниже

Question

Я хотел бы добавить div с идентификационным именем bakkant над кнопкой 'addrow', а не ниже этого. Также по какой-то причине, хотя он отлично работает в Jsfiddle, строки отображаются, а затем практически исчезают на практике). Каков наилучший способ сделать это? https://jsfiddle.net/j3xazjak/3/

 <div class="shape" id="plan4_shape"> 
      <span class="bakkant"> 
      <input class="measures" id="plan4_width" placeholder="mm"/><span class="times"> &times;</span> <input class="measures" id="plan4_width" placeholder="mm"/> 
      </span> 
      <span class="bakkant" id="bakkant"> 
      <input class="measures" id="plan4_width" placeholder="mm"/><span class="times"> &times;</span> <input class="measures" id="plan4_width" placeholder="mm"/><button class="close" value="close1">&times;</button> 
      </span> 
      <button name="add_row" class="addrow" id="addrow4" onClick="addrow()">Add row</button> 
     </div> 

Jquery

$(document).ready(function() { 
document.getElementById('addrow4').onclick = duplicate; 

var i = 0; 
var original = document.getElementById('bakkant'); 

function duplicate() { 

    var clone = original.cloneNode(true); 
    clone.id = "bakkant" + ++i; 
    original.parentNode.appendChild(clone); 

} 
/* var clone = original.cloneNode(true); // "deep" clone 
    clone.id = "duplicetor" + ++i; // there can only be one element with an ID 
    original.parentNode.appendChild(clone); 
    */ 
    /* jQuery('.four').before('<div class="addme">Add Me!</div>'); */ 
    }); 

Answer 1

Использование InsertBefore

original.parentNode.insertBefore(clone, original);