JSFiddle - React, Tailwind, and code Playground

by stefslam

HTML

<script src="https://rawgit.com/jylauril/jquery-runner/master/build/jquery.runner.js"></script>
<div id="container">
<span id="runner" data-state="1" data-start="600000"></span>

    <br />
    <br />
    <input type='button' id="StartStopButton" value='Play' />
    <input type='button' class="edit_runner" data-type="min" data-value="1" data-disable="60000" id="PlusMin" value='+1 Min' />
    <input type='button' class="edit_runner" data-type="min" data-value="-1" data-disable="60000" id="MinusMin" value='-1 Min' />
    <input type='button' class="edit_runner" data-type="sec" data-value="1" data-disable="1000" id="PlusSec" value='+1 Sec' />
    <input type='button' class="edit_runner" data-type="sec" data-value="-1" data-disable="1000" id="MinusSec" value='-1 Sec' />
    <input type='button' class="edit_runner" data-type="sec" data-value="10" data-disable="1000" id="PlusSecs" value='+10 Sec' />
    <input type='button' class="edit_runner" data-type="sec" data-value="-10" data-disable="1000" id="MinusSecs" value='-10 Sec' />
    <br />
    <br />Player 1 : <span id="runner1" class="cls_runner cls_runner_in" data-ingame="1" data-start="120000">00:00</span> 
    <input type='button' class="in_out" data-tospanid="1" value='In' />
    <br />
    <br />Player 2 : <span id="runner2" class="cls_runner cls_runner_in" data-ingame="1" data-start="221000">00:00</span> 
    <input type='button' class="in_out" data-tospanid="2" value='In' />
    <br />
    <br />Player 3 : <span id="runner3" class="cls_runner cls_runner_in" data-ingame="1" data-start="0">00:00</span> 
    <input type='button' class="in_out" data-tospanid="3" value='In' />
    <br />
    <br />Player 4 : <span id="runner4" class="cls_runner cls_runner_out" data-ingame="2" data-start="1244">00:00</span> 
    <input type='button' class="in_out" data-tospanid="4" value='Out' />
    <br />
    <br />Player 5 : <span id="runner5" class="cls_runner cls_runner_in" data-ingame="1" data-start="10000">00:00</span>

   ...

CSS

.in_out {
    width: 50px !important;
}
.cls_runner_in {
    color: green;
}
.cls_runner_out {
    color: red;
}
input[disabled=disabled], input:disabled {
    cursor: default;
    pointer-events: none;
    /*Button disabled - CSS color class*/
    color: #c0c0c0 !important;
    background-color: #ffffff !important;
}

JavaScript

function Custom_millisecondsToString(milliseconds) {
    var oneHour = 3600000;
    var oneMinute = 60000;
    var oneSecond = 1000;
    var seconds = 0;
    var minutes = 0;
    var hours = 0;
    var result;

    if (milliseconds >= oneHour) {
        hours = Math.floor(milliseconds / oneHour);
    }

    milliseconds = hours > 0 ? (milliseconds - hours * oneHour) : milliseconds;

    if (milliseconds >= oneMinute) {
        minutes = Math.floor(milliseconds / oneMinute);
    }

    milliseconds = minutes > 0 ? (milliseconds - minutes * oneMinute) : milliseconds;

    if (milliseconds >= oneSecond) {
        seconds = Math.floor(milliseconds / oneSecond);
    }

    milliseconds = seconds > 0 ? (milliseconds - seconds * oneSecond) : milliseconds;

    if (hours > 0) {
        result = (hours > 9 ? hours : "0" + hours) + ":";
    } else {
        result = "00:";
        result = "";
    }

    if (minutes > 0) {
        result += (minutes > 9 ? minutes : "0" + minutes) + ":";
    } else {
        result += "00:";
    }

    if (seconds > 0) {
        result += (seconds > 9 ? seconds : "0" + seconds);
    } else {
        result += "00";
    }
    //alert (result);
    return result;
}


$('.edit_runner').each(function () {
    $(this).prop('disabled', true);
});

function checkToDisableButtons() {

    var startstop_state = $('#runner').attr('data-state');

    //console.log($('#runner').attr('data-state'));
    //$('#runner').each(function() { alert($('#runner').attr('data-state')); });
    console.log(startstop_state);
    $('.edit_runner').each(function () {
        $(this).prop('disabled', true);
    });

    if (startstop_state == 1) {

        var runner_start = $('#runner').data('start');
        var runner_value = $('#runner').html();
        var piece_value = runner_value.split(':');
        var current_value_millisecond = (parseFloat(piece_value[0]) * 60 + parseFloat(piece_value[1])) * 1000;

        //$('.edit_runner').prop('disabled', true);

       ...