Inserir div e numero na frente da div dela no html

Front-end JavaScript
,
#1

eu quero clicar no botão e inserir uma div no html e quero exibir um numero na frente dessa div mostrando qual div é aquela, tipo aperto o botão vai exibir uma div e exibe o numero 1 na frente se eu apertar outra vez vai exibir o numero 2 na ultima div inserida, estou usando javascript mas ele acaba mudando o numero da 1º div que está sendo clonada deixando a primeira div sendo o maior numero, teria como eu inserir e exibir essas divs em ordem ou não alterar o numero da primeira mas colocando as próximas sequencialmente?

HTML:

<input id="gerar" type="button" value="Gerar Lote" />
<div class="l25">

    <h5 id="numero">1.</h5>

    <label>Créditos</label>

    <input value="0.00" />

</div>

jAVASCRIPT:

const [debitos, creditos] = [...document.querySelectorAll(".l25")];

//definir o código para o evento de click no botão gerar

document.getElementById("gerar").addEventListener("click", () => {

        numeral+=1;

    document.getElementById("numero").innerHTML = numeral;

     const novoCredito = creditos.cloneNode(true);
     resumo.parentNode.insertBefore(novoCredito, null);