JSFiddle - React, Tailwind, and code Playground

by Gregory Nikitas

HTML

<div class="fullname"  xp="10" sb="1" ap="100" st="R">Elana Eddinger</div>
<div class="fullname"  xp="9" sb="2" ap="80" st="R">Suanne Stayer</div>
<div class="fullname"  xp="8" sb="3" ap="60" st="R">Sherly Seppala</div>
<div class="fullname"  xp="7" sb="4" ap="40" st="R">Dora Denver</div>
<div class="fullname"  xp="6" sb="3" ap="20" st="S">Ofelia Osuna</div>
<div class="fullname"  xp="10" sb="3" ap="100" st="S">Clair Corlett</div>
<div class="fullname"  xp="9" sb="3" ap="80" st="S">Celestina Chamorro</div>
<div class="fullname"  xp="8" sb="3" ap="60" st="S">Tomika Tomko</div>
<div class="fullname"  xp="7" sb="4" ap="40" st="L">Stacia Scheck</div>
<div class="fullname"  xp="6" sb="5" ap="20" st="L">Lashanda Leep</div>
<div class="fullname"  xp="10" sb="1" ap="30" st="L">Lorinda Lamere</div>
<div class="fullname"  xp="10" sb="2" ap="80" st="L">Gabriel Godwin</div>
<div class="fullname"  xp="6" sb="3" ap="70" st="C">Laurence Luo</div>
<div class="fullname"  xp="7" sb="4" ap="40" st="C">Marilou Mcnary</div>
<div class="fullname"  xp="8" sb="1" ap="20" st="C">Peter Passarelli</div>
<div class="fullname"  xp="10" sb="5" ap="100" st="C">Odell Oxner</div>
<div class="fullname"  xp="6" sb="2" ap="80" st="F">Eneida Egli</div>
<div class="fullname"  xp="8" sb="5" ap="60" st="F">Lottie Larin</div>
<div class="fullname"  xp="7" sb="4" ap="60" st="F">Rochelle Rozell</div>
<div class="fullname"  xp="6" sb="5" ap="20" st="F">Joslyn Jurado</div>
<div class="fullname"  xp="10" sb="5" ap="10" st="M">Branda Boyko</div>
<div class="fullname"  xp="10" sb="5" ap="80" st="M">Claudie Covey</div>
<div class="fullname"  xp="8" sb="3" ap="60" st="M">Consuelo Croker</div>
<div class="fullname"  xp="7" sb="4" ap="40" st="M">Colin Conway</div>
<div class="fullname"  xp="6" sb="5" ap="20" st="G">Marcell Mason</div>
<div class="fullname"  xp="10" sb="1" ap="100" st="G">Paul Peel</div>
<div class="fullname"  xp="9" sb="2" ap="80" st="G">Devorah Davin</div>
<div class="fullname"  xp="8" sb="3"...

JavaScript

var people = [];
var mode = 0; //Sent to getShifts()
//mode 1 = Budget Maximisation
//mode 2 = Skillset Maximisation
//mode 3 = Availabililty Maximisation
//mode 4 = Balanced
var period = "day";
var shifts = 2;
var typesRequired = [[1,'R'],[1,'G'],[2,'L'],[3,'P']];
//xp = Experience/Skillset [10 = highest] - higher is better
//sb = Salary Bracket [5 = Highest] - lower is cheaper
//ap = Availability Percentage - higher is better
//st = Staff Type 
//---------------------------------
//			Staff Types
//---------------------------------
//R = Responsible Pharmacist
//S = Shelf Packer
//L = Locum
//P = Permanent
//C = Cashier
//F = Floor Assistance
//M = Store Manager
//G = Pharmacy Manager
$('.fullname').each(function(i) 
{
  people.push([$(this).text(),$(this).attr("xp"),$(this).attr("sb"),$(this).attr("ap"),$(this).attr("st")]); 
});
var allPeople = people.slice(); //Clone a copy of people
var perdayArray = [];
var shortFall = [];
function getShifts(mode)
{
    perdayArray = [];
    //people = allPeople.slice();
    for(var s = 0; s < shifts; s++)
    {
        perdayArray.push([]);
        shortFall.push([]);
    }
    switch(mode)
    {
        case 1 : skillsetMax(); break;
        case 2 : budgetMax(); break;
        case 3 : availabilityMax(); break;
        case 4 : balancedMax(); break;
        default : break;
    }
    return perdayArray;
}
function compareName(a, b)
{
	return a[0] > b[0];
}
function compareXP(a, b) 
{  
  return parseInt(a[1]) < parseInt(b[1]);
}
function compareSB(a, b) 
{  
  return parseInt(a[2]) > parseInt(b[2]);
}
function compareAP(a, b) 
{  
  return parseInt(a[3]) < parseInt(b[3]);
}
function compareBalanced(a, b)
{
    return (parseInt(a[3]) + (parseInt(a[1]) * 10) + ((10 - parseInt(a[2])) * 10)) < (parseInt(b[3]) + (parseInt(b[1]) * 10) + ((10 - parseInt(b[2])) * 10));
}
function compareBalancedV2(a, b)
{
    return (parseInt(a[1]) < parseInt(b[1])) && (parseInt(a[2]) > parseInt(b[2])) && (parseInt(a[3]) <...