Div between text characters

I have a text element that is built when the user clicks a button. In the middle of that text, I added an input element.I want to make this process repeats seven times but it looks complicated. I actually made a lot of things but here are the important ones So, First I made an input element and a button when the user enter input and click the button what he wrote will be displayed in a h1 element with a random missing word Then,I made an input element in the that the missing word should’ve been in.What I want is that this to repeat this process seven times.

`function myFunction() {
    var x = document.getElementById("input").value;
    x=x+" ";
    var y=document.getElementById("inputed");
    var a,b='c';
    let c,d=[];
    var e;
    var f=0;
    const array =[];
    const z=x.length;
for(let index=-1;index<7;index++){
        a,b='c';
        c.push(0);
        d.push(0);
        c[index]=0;
        d[index]=0;
        e=1;
        f=0;
//Here the program will get a random space location and the space after it
    while(a!=' ' ){
        c[index]=Math.floor(Math.random()*x.length-2);
        a=x.charAt(c[index]);
    }
    d[index]=c[index];
    //The variable d will be the same as c and will increase until its value corrspends to a space
    while(b!=' ' ){
        d[index]++;
        b=x.charAt(d[index]);
    }
//I want the y.innerHTML to write from the 0 to c[0] then display the input element then from d[0] //to c[1] and display the input element again and form d[1] to c[2] until 7
    y.innerHTML = `${x.slice(
        0,
        c[0]
    )}<input type="text" style="color: gray;border:2px solid;border-radius: 10px;outline: none;
font-size: x-large;height:40px;width: 100px;" >${x.slice(
        d[0],
        z
    )} `;
}
}``