JSFiddle - React, Tailwind, and code Playground

by António Almeida

HTML

<div id="chooses-title"><p>Escolhas:</p></div>
<div id="results-title"><p>Resultado:</p></div>
<div id="chooses"></div>
<div id="results"></div>

CSS

body {
    width: 800px;
}
#results, #chooses, #results-title, #chooses-title {
    background-color: #DDF;
    float: left;
    margin: 5px;
}
#results, #results-title { width: 250px; }
#chooses, #chooses-title { width: 400px; }

p {
    font-family: "Trebuchet MS";
    font-size: 12px;
    line-height: 18px;
}

.name {
    font-weight: bold;
    color: #777;
}

JavaScript

var locais = new Array(
    {"nome": "Aveiro - A",    "vagas": 2},
    {"nome": "Aveiro - B",    "vagas": 1},
    {"nome": "Ovar",          "vagas": 1},
    {"nome": "Feira",         "vagas": 1}
);

var alunos = {
    "Ana Santos":         [4, 1, 2, 3],
    "Rita":               [4, 3, 1, 2],
    "Joaquina":           [],
    "Juliana":            [4, 3, 1, 2]
};

var distribuicao = {}, done = false;
$.each(alunos, function(key, value) {
    done = false;
    $.each(value, function(subkey, subvalue) {
        if(locais[subvalue-1]["vagas"] > 0 && !done) {
            locais[subvalue-1]["vagas"]--;
            distribuicao[key] = locais[subvalue-1]["nome"];
            done = true;
        }
    });
});

$.each(alunos, function(key, value) {
    var places = "";
    for(var i=0 ; i<value.length ; i++) 
        places += locais[value[i]-1]["nome"] + ", ";
    $("#chooses").append("<p><span class='name'>"+key+"</span> - <span>"+places+"</span></p>")
});

$.each(distribuicao, function(key, value) {
    $("#results").append("<p><span class='name'>"+key+"</span> - <span>"+value+"</span></p>")
});

console.log(distribuicao);