javascript append at specific index document.querySelector

I am trying to create a new element and insert it inside document.querySelector(‘.content’); at specific index? my simple code below.

const container = document.querySelector('.content');
var counter = 0;
var p = document.createElement('p');
p.textContent = "INSERT NEW"
var buttonOne = document.createElement('button');
buttonOne.className = "btnClass";
buttonOne.innerText = "Insert";
buttonOne.onclick =  function() {
    var buttonTwo = document.createElement('button');
    buttonTwo.className = "btnClass";
    buttonTwo.innerText = "new";
    var nodes = Array.prototype.slice.call(document.getElementById('container').children);
    var index = nodes.indexOf(this);
    var c = document.createElement('p');
    c.textContent = "inserted new p";
    **container.append(c, buttonTwo, index++); <-- something like this**
};

for (let i = 0; i < 5; i++) {
    var p = document.createElement('p');
    p.textContent = "Index" + " " + i 
    container.append(p, buttonOne);
}

for example; if I have 10 buttons. Click on the 3rd, it should ADD a new element at 4th and pushes the rest.
is it possible? or any other options?