I have an <ol> in EJS that consists of info obtained from objects in a database. As I make new objects, the list gets a new <li> with their information. These objects all have a date as their first field.

Is it possible to have the <ol> sort itself chronologically based on this date field? i.e., nearest date is '1' in the list, but if an object with an earlier date is added it will become '1' and the previous near date becomes '2'. The date is also contained in its own <span> within the list.

Here's what my EJS is looking like for now:

    <ol class="shows">
    <% for(let i=0; i < info.length; i++) {%>
        <li class="show">
            <span class="bold"><%= info[i].date %></span><span>  </span><span><%= info[i].bands %></span><span> - </span><span><%= info[i].venue %></span><span> - </span><span><%= info[i].ticketPrice %></span><span> - </span><span><%= info[i].startTime %></span><span> - </span><span><a href="<%= info[i].ticketLink %>">♣</a></span>
        </li>
    <% } %>
    </ol>