JSFiddle - React, Tailwind, and code Playground

by tr_santi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed"></script>
<table class="cal" cellspacing="2">
    <tr>
        <th>MONDAY
            <br><span class="date">7/31</span></th>
        <th>TUESDAY
            <br><span class="date">8/1</span></th>
        <th>WEDNESDAY
            <br><span class="date">8/2</span></th>
        <th>THURSDAY
            <br><span class="date">8/3</span></th>
        <th>FRIDAY
            <br><span class="date">8/4</span></th>
    </tr>
    <tr>
        <td>
            <div class="profile">
                <input type="checkbox" id="cb1" name="cb1" />
                <label for="cb1"><i class="fa fa-check"></i>Tyler</label>
            </div>
            <div class="profile">
                <input type="checkbox" id="cb2" name="cb2" />
                <label for="cb2"><i class="fa fa-check"></i>Bilal</label>
            </div>
            <div class="profile">
                <input type="checkbox" id="cb3" name="cb3" />
                <label for="cb3"><i class="fa fa-check"></i>Mike</label>
            </div>
        </td>
        <td>
            <div class="profile">
                <input type="checkbox" id="cb4" name="cb4" />
                <label for="cb4"><i class="fa fa-check"></i>Tyler</label>
            </div>
            <div class="profile">
                <input type="checkbox" id="cb5" name="cb5" />
                <label for="cb5"><i class="fa fa-check"></i>Bilal</label>
            </div>
            <div class="profile">
                <input type="checkbox" id="cb6" name="cb6" />
                <label for="cb6"><i class="fa fa-check"></i>Mike</label>
            </div>
        </td>
        <td>
            <div class="profile">
                <input type="checkbox" id="cb7" name="cb7" />
                <label for="cb7"><i class="fa fa-check"></i>Tyler</label>
           ...

CSS

body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto Condensed';
    background-color: white;
    letter-spacing: 1px;
}

.date {
    color: #95d0f9;
}

.cal {
    border-collapse: collapse;
    width: 100vw;
}

.cal td,
.cal th {
    width: 20%;
    text-align: center;
    padding: 15px;
    border: 2px solid #eee;
}

.cal th {
    background-color: #1a8bdd;
    color: white;
    padding: 5px 15px;
}

input[type=checkbox] + label {
    cursor: pointer;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 6px;
    background-color: #7dc42b;
    color: white;
    transition: 0.2s opacity;
    width: 100%;
    display: inline-block;
    margin: 8px 0px;
    position: relative;
    text-align: left;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox] + label > .fa.fa-check {
    padding-right: 4px;
    position: absolute;
    right: 5px;
    top: 14px;
    font-sizE: 24px;
    transition: 0.3s top;
}

input[type=checkbox]:not(:checked) + label {
    opacity: 0.4;
}

input[type=checkbox]:not(:checked) + label:hover {
    opacity: 0.6;
}

input[type=checkbox]:not(:checked) + label > .fa.fa-check {
    opacity: 0;
}

input[type=checkbox]:checked + label {
    opacity: 1;
}



input[type=checkbox]:checked + label > .fa.fa-check {
    top: 8px;
}

.cal td .profile:nth-child(2) > label {
    background-color: #f28007;
}

.cal td .profile:nth-child(3) > label {
    background-color: #1a8bdd;
}

#btnSubmit {
    background-color: #1a8bdd;
    margin-top: 20px;
    padding: 15px;
    font-family: 'Roboto Condensed';
    border: 0;
    font-size: 20px;
    color: white;
    font-weight: bold;
    border-radius: 10px;
    letter-spacing: 2px;
    cursor: pointer;
    margin: 20px auto;
    display: block;
    outline: 0;
    transition: 0.4s background-color, 0.3s margin-top;
    
}

#btnSubmit:hover {
    margin-top: 16px;
    background-color: #3e9ce0;
}

JavaScript

$("#btnSubmit").on("click", function() {

    var days = {};

    var $days = $("th");
    $days.each(function() {

        var thisDay = $(this).index();
        var $profiles = $(this).parent().next().children("td").eq(thisDay).find("input[type=checkbox] + label");
        var profiles = $profiles.map(function() {
            return $(this).text()
        }).get();
        var $choices = $(this).parent().next().children("td").eq(thisDay).find("input[type=checkbox]:checked + label");
        var selections = $choices.map(function() {
            return $(this).text()
        }).get();

        var todaysSelections = {}
        for (profile of profiles) {
            todaysSelections[profile] = selections.includes(profile);
        }
        days[$(this).text()] = todaysSelections;
    })

    console.log(days);

})