JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div id="igUpload1"></div>
    <div class="container-info">
        <label>
             平均速度: 
            <span id="speed">0</span>
            KB/S
        </label>
    </div>
    <div class="container-info">
        <label>
            アップロードしたファイル:  
            <span id="uploadedFiles">0</span>
        </label>
    </div>
    <div class="container-info">
        <label>
            アップロード完了: 
            <span id="uploaded">0</span>
            KB
        </label>
    </div>
    <div class="container-info">
        <label>
            アップロード待ち:
            <span id="toUpload">0</span>
            KB
        </label>
    </div>
    <div class="container-info">
        <label>
            経過時間:
            <span id="timeElapsed">0</span>
            秒
        </label>
    </div>
    <div class="container-info">
        <label>
            残り時間:
            <span id="timeLeft">0</span>
            秒
        </label>
    </div>
    <div id="error" class="error-info">
        1 MB より大きいファイルはアップロードできません。
    </div>
    <input type="hidden" id="hdnStartTimer" value="false"></input>

CSS

.container-info, .error-info { margin: 10px 0 ; font-weight: bold; }
        .error-info { color: #FF0000; }

JavaScript

$(function () {
$('#igUpload1').igUpload({
            mode: 'multiple',
            progressUrl: 'https://jp.igniteui.com/IGUploadStatusHandler.ashx',
            maxUploadedFiles: 5,
            maxSimultaneousFilesUploads: 2,
            controlId: 'serverID1'
        });

        function showAlert(args) {
            $("#error-message").html(args.errorMessage).stop(true, true).fadeIn(500).delay(3000).fadeOut(500);
        }

        var timeOutID;
        function startTimer() {
            var currCount = parseInt($('#timeElapsed').html(), 10);
            $('#timeElapsed').html(currCount + 1);
            timeOutID = setTimeout('startTimer()', 1000);
        }
        function areAllFilesUploaded() {
            var uploadInfo = $("#igUpload1").igUpload('getFileInfoData');
            return uploadInfo.countTotalFiles === uploadInfo.countUploadingFiles;
        }
        function refreshProgressInformation() {
            var uploadInfo = $("#igUpload1").igUpload('getFileInfoData'),
                timeElapsed = parseInt($('#timeElapsed').html(), 10),
                uploadSpeed;

            if (timeElapsed === 0) {
                uploadSpeed = 0;
            } else {
                uploadSpeed = Math.round(uploadInfo.fileSizeUploaded / (1024 * timeElapsed));
            }

            $("#uploadedFiles").html(uploadInfo.countUploadingFiles);
            $("#uploaded").html(Math.round(uploadInfo.fileSizeUploaded / 1024));
            $("#toUpload").html(Math.round((uploadInfo.fileSizeTotal - uploadInfo.fileSizeUploaded) / 1024));
            $("#speed").html(uploadSpeed);
            if (uploadSpeed === 0) {
                $("#timeLeft").html(0);
            } else {
                $("#timeLeft").html(Math.round((uploadInfo.fileSizeTotal - uploadInfo.fileSizeUploaded) / (1024 * uploadSpeed)));
            }
        }

        $(function () {
            $("#error").css("display", "none");
            $("#igUpload1").on({
               ...