JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<p id="exoutput2"></p>
<div id="exdata">
    <article id="1">
        <header>
             <h1 class="exnum">Exhibit 1</h1>

        </header>
        <div class="exopened" style="display:none;"></div>
    </article>
    <article id="2">
        <header>
             <h1 class="exnum">Exhibit 2</h1>

        </header>
        <div class="exopened" style="display:none;"></div>
    </article>
    <article id="3">
        <header>
             <h1 class="exnum">Exhibit 3</h1>

        </header>
        <div class="exopened" style="display:none;"></div>
    </article>
</div>
<p id="output"></p>
<p id="exoutput"></p>
<p id="extimedata"></p>
<p id="extimedata2"></p>

<p id="tot1"></p>
<p id="exoutputsave"></p>

CSS

.selected {
    background: lime;
}

JavaScript

var articledivs = $('#exdata > article'),    
    output = $('#output'),
    exhibitsarray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    delay = 100;

articledivs.click(function () {
    var rez = jQuery(".sresult").html();
    var titlerez = jQuery("#seltitle").html().replace(/ /g,'');
    if (rez != "NaN") {
        var sum1 = 0.0;
        sum1 += parseFloat(jQuery(this).text(),10);
    
    //alert(sum1);   
        $("#tot1").html("<span>" + titlerez + " Total time in seconds: </span><span>" + rez + "</span><br>");  
        
    }
    $(this).toggleClass('selected').siblings().removeClass('selected');
    
});

setInterval(function () {
    var idx = articledivs.filter('.selected').index();
    exhibitsarray[idx] = exhibitsarray[idx] + delay;
    Secs = exhibitsarray[idx] / 1000;
    var selectedTitle = $(".selected").find("h1").html();
    $("#exoutput2").html('<span id="seltitle">' + selectedTitle + ' </span><span class="sresult">' + Secs + '</span>');  
}, delay);