JSFiddle - React, Tailwind, and code Playground

by vikastyagi87

HTML

<div id="contentWrap">
    <ul id="sortable">
        <li id='1'>Student A</li>
        <li id='2'>Student B</li>
        <li id='3'>Student C</li>
        <li id='4'>Student D</li>
        <li id='5'>Student E</li>
        <li id='6'>Student F</li>
        <li id='7'>Student G</li>
        <li id='8'>Student H</li>
    </ul>
</div>
<div id="buttonhold">
            <div>
                
                <button id="clicky" class="button" type="button">Reset Absentees</button>
                <form name="save" action="saveTest.php" method="post">
                <input type="hidden" id="absentees" name="absent" />
                <input type="hidden" id="late" name="late" />
                <input type="submit" class="button" value="Submit Attendance"/>
                </form>
            </div>
            
            <div id="collect">
                Absentees: <br>
            </div>
            <div id="collect1">
                late: <br>
            </div>
        </div>

CSS

#sortable li {
    margin: 15px 15px 1px 15px; 
    padding: 1px; 
    float: left; 
    width: 80px; 
    height: 80px; 
    font-size: 11px; 
    text-align: center; 
    background-color:#cfcfcf;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    zoom: 1;
}

.on { background-color:#CC3333 !important; color:#FFFFFF; }
.absent { background-color:blue !important; color:#red; }

JavaScript

$(function() {
    $("#sortable li").each(function() {
        var count = 0;
        $(this).click(function() {
            var $this = $(this);
            var user = $this.attr('id');
            var p = $('<p />').attr('user', user).text($this.text());
            var absentees = [];
            var late = [];

            count++;
            if ($('#absentees').val().length > 0) {
                absentees = $('#absentees').val().split(',')
            }
            if ($('#late').val().length > 0) {
                late = $('#late').val().split(',')
            }
            if (count === 1) {
                $("#collect").append(p);
                absentees.push(user);
                late.push(user);
                $this.addClass('on');
                $('#absentees').val(absentees.join(','));
            }
            else if (count === 2) {
                $("#collect").children('p[user="' + user + '"]').remove();
                absentees.splice(absentees.indexOf(user), 1);
                $this.removeClass('on');
                $this.addClass('absent');
                $("#collect1").append(p);
                late.push(user);
                //alert("This is late" + late);
            }
            else {
                $("#collect1").children('p[user="' + user + '"]').remove();
                late.splice(late.indexOf(user), 1);
                $this.removeClass('absent');
                count = 0;
            }


        });
        $("#clicky").click(function() {
            $('#sortable li').removeClass('on');
            $("#collect").text("Absentees:");
            $('#absentees').val('');
        });
    });
});