Erro nos inputs

Front-end JavaScript
#1

(POR FAVOR LEIA COM ATENÇÃO)esse é o meu codigo:

function criarmais(){
    criar++;
    nome = prompt("nome");
    tipo = prompt("tipo");
    codigo = codigo + "<"+tipo+" id='"+nome+"' style='width:5%;height:10%;position:absolute;left:0%;top:0%;'></"+tipo+">";
    novo = document.createElement('input');
    novo.type = "color";
    novo.placeholder = "cor de fundo";
    novo.id = "fundo"+criar;
    document.body.appendChild(novo);
    document.querySelector("#fundo"+criar).addEventListener("input",function(){
       codigo = codigo + "<script>document.querySelector('#"+nome+"').style.background = '"+document.querySelector("#fundo"+criar).value+"';</script>";
       tela.srcdoc = codigo;
    });
    tela.srcdoc = codigo;
}

tudo esta funcionando normalmente,quando eu crio o segundo objeto os inputs são criados normalmente e o segundo objeto é editado, porem caso eu queira alterar o input que modifica o primeiro objeto, simplestente não funciona…
codepen:

https://codepen.io/chorao-gamedev/pen/gOLqXGz?editors=1010