Order newly added entries dynamically

Question

I do this query in the database to list all the names of the registrations...

    $('.ordenar').click(function(){
                    db.transaction(function(tx){
                        tx.executeSql('SELECT nome FROM cartoes', [], function(tx,results){
                            for(i=0; i<results.rows.length; i++){
                                console.log(results.rows.item(i).nome);
                                //Aqui ele me retorna todos os nomes dos cadastros existentes, exemplo:
//nomecadastro1
//nomecadastro2
//e assim sucessivamente..
                            }

                        });
                    });
                });

These registrations are entered through an append, this way:

$(".listagem").append(
                                                            `<div class="row" id="corpo-cartoes">
                                                                <div class="col s12 m7" style="width: 100%;">
                                                                    <div class="card">
                                                                        <a href="cartao.html#${lastId}">
                                                                            <div class="card-image">
                                                                                <div class="gradient-cartao-lista"></div>
                                                                                <img src="${capa}">
                                                                                <span class="card-title"><h1>${data.card.empresa}</h1><p>${data.card.code}</p></span>
                                                                            </div>
                                                                        </a>
                                                                        <div class="card-action icone-meu-cartao">
                                                                            <a href="#"><i class="material-icons">star</i></a>
                                                                            <a href="#"><i class="material-icons">crop_free</i></a>
                                                                            <a href="#"><i class="material-icons">visibility</i></a>
                                                                            <a href="cadastro-cartao.html#${lastId}"><i class="material-icons btn-editar">edit</i></a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>`
                                                        );  

Visually they look like this:

I created A first, then B...

Therefore, it must be reversed, the B must be before the A.

Soon, how could I order them through the result?

I would like to sort them by the recently added ones, that is, from the last record to the first. How could I do this with Javascript/Jquery?

Answer 1

Follow a simple model, I have a container in flex, aligned as column, when you click on btn a ul which is mine container makes a toggleClass and of column mute to column-reverse thus reversing the order of the list.

$( "button" ).click(function() {
  $( 'ul' ).toggleClass( "inverte" );
});

ul {
    display: flex;
    flex-direction: column;
}
.inverte {
    flex-direction: column-reverse;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<button>inverter</button>
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

Answer 2

If you want to do it for queryyou can use the clause ORDER BY:

ORDER BY coluna DESC

Or you can order in the JavaScript for sort:

const rows = results.rows.sort((a,b) => return b.coluna - a.coluna);

Answer 3

A suggestion of how you could order would be using array.Sort. For this, you could map the results of your query by an array and perform a Sort with a classification function customized.