javascript Comparação de Resultados

[athos.abreu 0]

Boa noite, estou fazendo esse código de sorteio, porém,  

 

não estou conseguindo devolver a comparação no segundo campo.

 

se sair o número 1, tem que devolver no segundo campo, o nome id1

se sair o número 2, tem que devolver no segundo campo, o nome id2

 

segue o código, obs: o primeiro campo faz o random corretamente, estou com dificuldade comparar os resultados.
 

	<script type="text/javascript">
	var nomes = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21"]
	var id = [id1, id2,id3, id4, i5, id6, id7, id8, id9, id10,id11, id12,id13, id14, i15, id16, id17, id18, id19, id20,id21]
	id1 = ["GabrielOscar20"]
	id2= ["cauzeraa"]
	id3=["Vitinh0Delas"]
	id4 = ["Kurtz21"]
	id5 = ["mauricioMB2020"]
	id6 = ["vncampos"]
	id7 = ["DeathAmesth"]
	id8 = ["ViniciusRamos12"]
	id9 = ["Misguidedeggman15401"]
	id10 = ["DividedBat9478"]
	id11 = ["DalalibereShadow"]
	id12 = ["VanquishedJester3427"]
	id13 = ["FlushestStar829"]
	id14 = ["Dredsdani"]
	id15 = ["Riiquebr16"]
	id16 = ["Destroctor12"]
	id17 = ["Rapidcreature17"]
	id18 = ["Xtentaza1"]
	id19 = ["FelipeKazzoid"]
	id20 = ["ricmeier"]
	id21 = ["Jogadorfelizdopaq"]
	function sorteio() {
	var c = document.getElementById('campo');
	var d = document.getElementById('campo2');
	var i = 0;
	var v = 5;
	var t = 2000;
	var intervalo = window.setInterval(function() {
	if (i >= nomes.length)
	i = 0;
	c.value = nomes[i++];
	}, v);
	window.setTimeout(function() {
	clearInterval(intervalo);
	var n = Math.floor(Math.random()*nomes.length);
	c.value = nomes[n];
	for(c=0;c<21;c++){
	id= c;
	d.value =id[c];
	}} , t);}
	</script>
	<div id="sorteio">
	<h1>Sorteio Aleatório Pacybits Brasil:</h1>
	<p> Numéro Sorteado:
	<input type="text" id="campo" name="campo">
	</p>
	<p>ID do Ganhador:
	<input type="text" id="campo2" name="campo2">
	<br>
	<input type="button" onClick="sorteio();" value="Sortear" id="btn" name="btn">
	</p>
	<div id="config">
	<h2>by Athos Abreu</h2>
	</div>
	</div>

 

 

[abraaoz 0]

Você não precisa de dois arrays para isso.

<script type="text/javascript">
    var nomes = [
        "GabrielOscar20",
        "cauzeraa",
        "Vitinh0Delas",
        "Kurtz21",
        "mauricioMB2020",
        "vncampos",
        "DeathAmesth",
        "ViniciusRamos12",
        "Misguidedeggman15401",
        "DividedBat9478",
        "DalalibereShadow",
        "VanquishedJester3427",
        "FlushestStar829",
        "Dredsdani",
        "Riiquebr16",
        "Destroctor12",
        "Rapidcreature17",
        "Xtentaza1",
        "FelipeKazzoid",
        "ricmeier",
        "Jogadorfelizdopaq"
    ];
    function sorteio() {
        var c = document.getElementById('campo');
        var d = document.getElementById('campo2');
        var i = 0;
        var v = 5;
        var t = 2000;
        var intervalo = window.setInterval(function() {
            if (i >= nomes.length) i = 0;
            c.value = i++;
        }, v);
        window.setTimeout(function() {
            clearInterval(intervalo);
            var n = Math.floor(Math.random() * nomes.length);
            c.value = n;
            d.value = nomes[n];
        }, t);
    }
</script>
<div id="sorteio">
    <h1>Sorteio Aleatório Pacybits Brasil:</h1>
    <p>
        Número Sorteado:
        <input type="text" id="campo" name="campo">
    </p>
    <p>
        ID do Ganhador:
        <input type="text" id="campo2" name="campo2">
        <br>
        <input type="button" onClick="sorteio();" value="Sortear" id="btn" name="btn">
    </p>
    <div id="config">
        <h2>by Athos Abreu</h2>
    </div>
</div>