JSFiddle - React, Tailwind, and code Playground

HTML

<label>Number of players in Team A</label><select name="teamaplayers" id="teamaplayers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected>5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>

<br/> 
<label>Number of players in Team B</label><select name="teambplayers" id="teambplayers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected>5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<input type="text" name="pickedplayers" id="pickedplayers" value="5"/> 
<table border="1"></table>
<input type="button" name="pickmyteam" id="pickmyteam" value="Pick My Team"/>

CSS

.error-notification {
    background-color:#AE0000;
    color:white;
    cursor:pointer;
    display: none;
    padding:15px;
    padding-top: 0;
    position:absolute;
    z-index:1;
    font-size: 100%;
    text-align: left;
    width:350px;
}

.error-notification h2 {
    font-family:Trebuchet MS,Helvetica,sans-serif;
    font-size:140%;
    font-weight:bold;
    margin-bottom:7px;
    margin-top:2px;
    color:#fff;
}

div.error-notification {
    font-family:Trebuchet MS,Helvetica,sans-serif;
}

JavaScript

function arrayToGroups(source, groups) {

    //This is the array of groups to return:
    var grouped = [];

    //work out the size of the group
    groupSize = Math.ceil(source.length / groups);

    //clone the source array so we can safely splice it
    var queue = source;

    for (var r = 0; r < groups; r++) {
        //Grab the next groupful from the queue, and append it to the array of groups
        grouped.push(queue.splice(0, groupSize));
    }
    return grouped;
}

var sort_by = function(field, reverse, primer) {

    var key = function(x) {
        return primer ? primer(x[field]) : x[field]
    };

    return function(a, b) {
        var A = key(a),
            B = key(b);
        return ((A < B) ? -1 : (A > B) ? +1 : 0) * [-1, 1][+ !! reverse];
    }
}

var herbs = [{
    "name": "basil",
    "skill": "6",
    "id": "1"},
{
    "name": "casil",
    "skill": "6",
    "id": "2"},
{
    "name": "dasil",
    "skill": "6",
    "id": "3"},
{
    "name": "easil",
    "skill": "6",
    "id": "4"},
{
    "name": "fasil",
    "skill": "6",
    "id": "5"},
{
    "name": "gasil",
    "skill": "6",
    "id": "6"},
{
    "name": "hasil",
    "skill": "6",
    "id": "7"},
{
    "name": "iasil",
    "skill": "6",
    "id": "8"},
{
    "name": "jasil",
    "skill": "6",
    "id": "9"},
{
    "name": "kasil",
    "skill": "6",
    "id": "10"},
{
    "name": "lasil",
    "skill": "6",
    "id": "11"},
{
    "name": "masil",
    "skill": "6",
    "id": "12"},
{
    "name": "nasil",
    "skill": "6",
    "id": "13"},
{
    "name": "oasil",
    "skill": "6",
    "id": "14"}
                        ];

herbs = herbs.sort(sort_by('name', true));

var herbGroups = arrayToGroups(herbs, 4);

var $t = $("table");
var a = [];
var b = [];
var maxlength = 0;


for (i = 0; i < herbGroups.length; i++) {
    if (herbGroups[i].length > maxlength) maxlength = herbGroups[i].length;
}

for (i = 0; i < maxlength; i++) {
    var a = [];
    for (j = 0; j < herbGroups.length; j++) {
   ...