Problema na criação de projeto pessoal

Estou tentando criar um código no qual o usuário primeiro irá inserir a quantidade de ingredientes que irá utilizar para fazer uma receita. Após inputar através de um prompt, terá uma caixa de texto e button para o usuário escrever os ingredientes (um de cada vez) depois clicará no botão para em seguida aparecer o texto "Seu ingrediente é (inserido na caixa de texto)" e depois retornará a caixa de texto para escrever o ingrediente seguinte e aparecer uma nova mensagem com o ingrediente posterior. Porém após o usuário digitar quantidade de ingredientes no prompt, já está aparecendo todas as mensagens "seu ingrediente é ". Conseguem me ajudar? : ) OBS: Até então só fiz a Aula 1 de programação, então sei poucas funções por enquanto (if, while, boolean, for) Segue o código abaixo que montei até então para identificarem onde estou errando:

<meta charset = "UTF-8">

<h3>Receitas de Caio</h3>

<input/>
<button>Digite aqui seu ingrediente</button>

<script>

    function pulaLinha() {

        document.write("<br>");
    }    


    function mostra (texto) {

        pulaLinha();
        document.write(texto);
    }

    var quantidadeIngredientes = parseInt(prompt("Quantos ingredientes terá sua receita?"));

    var contador = 1;

    while (contador <= quantidadeIngredientes) {


        var input = document.querySelector("input");
        input.focus();    


        mostra("Seu " + contador + "º ingrediente é " + input.value)
        contador++;
    }

    var button = document.querySelector("button");


    </script>