JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.earner.iixxii.cc/modules/apTimetracker/js/jquery.json-2.2.min.js"></script>
<script src="http://www.earner.iixxii.cc/modules/apTimetracker/js/jquery.jeditable.mini.js"></script>
<script src="http://www.earner.iixxii.cc/modules/apTimetracker/js/jquery.jeditable.time.js"></script>
<table width="100%" cellspacing="0" cellpadding="0" class="individual_times">
            <tbody><tr>
                <th>Start</th>
                <th>End</th>
                <th>Elapsed</th>
                <th></th>
            </tr>
                        <tr>
                <td style="width: 290px" id="start_124" class="time" title="Click to edit...">11:38</td>
                                    <td style="width: 290px" id="end_124" class="time" title="Click to edit...">11:29</td>
                    <td>838:59:59</td>
                                <td><span id="delete124"><img alt="delete" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png" style="vertical-align: top;"></span></td>
            </tr>
                        <tr>
                <td style="width: 290px" id="start_125" class="time" title="Click to edit...">12:03</td>
                                    <td style="width: 290px" id="end_125" class="time" title="Click to edit...">12:03</td>
                    <td>00:00:01</td>
                                <td><span id="delete125"><img alt="delete" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png" style="vertical-align: top;"></span></td>
            </tr>
                        <tr>
                <td style="width: 290px" id="start_126" class="time" title="Click to edit...">12:24</td>
                                    <td style="width: 290px" id="end_126" class="time" title="Click to edit...">12:34</td>
                    <td>00:09:15</td>
                                <td><span id="delete126"><img alt="delete" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png"...

JavaScript

var jamroom_url = 'http://www.earner.iixxii.cc';
    /**
     * this is for the editable times using jeditable.
     */
     $(".time").each(function(){
        $(this).editable(submitEdit, {
            indicator : '<img src="' + jamroom_url + '/modules/apTrigger/images/spinner.gif">',
            type      : 'time',
            submit    : 'OK',
            tooltip   : 'Click to edit...',
            cancel    :'cancel',
            id        : $(this).attr('id')
        });
    });

    /**
     * and this is extending jeditable to return multiple values to update the elapsed time too.
     * from http://stackoverflow.com/questions/966539/how-to-get-out-of-jquery-jeditable-mess
     * @param value
     * @param settings
     */
    function submitEdit(value, settings) {
        var edits       = new Object();
        var origvalue   = this.revert;
        var textbox     = this;
        var result      = value;
        edits['value']  = value;
        edits['id']     = settings.id;
        var returned = $.ajax({
            url: jamroom_url + "/apTimetracker.php?mode=tracker&t=edit",
            type: "POST",
            data : edits,
            dataType : "json",
            complete : function (xhr, textStatus) {
                var response = $.secureEvalJSON(xhr.responseText);
                if (response.success_msg == 'success') {
                    alert('was successful');
                }
            }
        });
        return(result);
    }