JSFiddle - React, Tailwind, and code Playground

by jackwanders

HTML

<ul id="roster"></ul>

JavaScript

var onCall = [
        {
            rank: 1,
            name: 'Jack'
        },
        {
            rank: 3,
            name: 'Angela'
        },
        {
            rank: 4,
            name: 'Tom'
        },
        {
            rank: 5,
            name: 'Bill'
        },
        {
            rank: 8,
            name: 'Bryan'
        },
        {
            rank: 12,
            name: 'Jill'
        },
        {
            rank: 13,
            name: 'Meghan'
        },
        {
            rank: 14,
            name: 'John'
        },
        {
            rank: 17,
            name: 'Andrew'
        }
    ],
    evens = [],
    odds = [],
    roster = [],
    person,
    list = $('#roster');

for(var i = onCall.length-1; i >= 0; i--) {
    person = onCall[i];
    if(person.rank % 2 === 0) {
        evens.push(person);
    } else odds.push(person);
}
roster = evens.concat(odds);

for(var r = 0; r < roster.length; r++) {
    list.append($('<li>'+(r+1)+': '+roster[r].name+' ('+roster[r].rank+')</li>'));
}