JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>
<link rel="stylesheet" href="http://abpetkov.github.io/switchery/dist/switchery.min.css">
       <table class="table table-hover dataTables-ll" >
                                        <thead>
                                        <tr>
                                        
                                            <th>Attendance</th>
                       
                                        </thead>
                                        <tbody>

                                            <tr class="gradeX">
                                                <td class="table-data-center">


                                                </td>
                                                <td class="table-data-center">
                                                </td>
                                                <td class="table-data-center">

            

                                                    <input type="checkbox" class="js-switch attendance_<?=$i?>"
                                                           name="present" value="1">

                                                    <input type="checkbox" class="js-switch-2 attendance_<?=$i?>"
                                                           name="absent" value="2"
                                                    >
                                                    <input type="checkbox" class="js-switch-3 attendance_<?=$i?>"
                                                           name="tardy" value="3"
                                                    >

                                                </td>
                                   
                                            </tr>
                     
                                        </tbody>
                                    </table>

JavaScript

var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    elems.forEach(function(html) {
        var switchery = new Switchery(html);
    });


    var absent = Array.prototype.slice.call(document.querySelectorAll('.js-switch-2'));
    absent.forEach(function(html) {
        var switchery = new Switchery(html, {
            color: '#ED5565'

        });
    });



    var absent = Array.prototype.slice.call(document.querySelectorAll('.js-switch-3'));
    absent.forEach(function(html) {
        var switchery = new Switchery(html, { color: '#f8ac59' });
    });

//    $(".js-switch").first(".switchery").addClass("switch-present");
    $(".js-switch").next(".switchery").addClass("switch-present");

    $(".js-switch-2").next(".switchery").addClass("switch-absent");
    $(".js-switch-3").next(".switchery").addClass("switch-tardy");