JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="pagewrap">
        <header id="header"></header>
        <div id="main-container">
            <form>
                <button type="button" onclick="createNewTimer()">Create Timer</button>Object Name:
                <input id="ObName" type="text" name="Oname">
            </form>
            <div class="timer-placeholder"></div>
        </div>
        <footer id="footer">
            <div id="copyrights">Copyright &copy jaru</div>
        </footer>
    </div>
    <script src="js/app.js"></script>
</body>

CSS

/*Reser sheet*/
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*reset sheet end*/

/*Def settings*/
 body {
    background: #ffffff;
}
#pagewrap {
    position: relative;
    width: 1400px;
    margin: 0 auto;
}
.timer {
    width: 200px;
    display: block;
    margin: 100px 100px;
    font-family: fantasy;
    font-size: 26px;
    font-style: italic;
}
#footer {
    position: absolute;
    top: 1030px;
    background: #293036;
    height: 170px;
    border: solid #404f52;
    border-width: 10px 0 0 0;
    width: 100%;
}
#copyrights {
    float: right;
    color: #919ca0;
    margin-top: 140px;
    margin-right: -145px;
    font-size: 12px;
}

JavaScript

var startTime = 0;
var itemNum = 0;
var obName;

/*
function display(itemNum){
    var item = document.getElementsByClassName("timer");
    for (var i=0; i<item.length; i++){
        var check = item[i].getAttribute("itemnum");
        console.log(item[i]);
        if (check = itemNum){

            var show = item[i];
        }
    }
    // later record end time
    // later record end time
    var endTime = new Date();

    // time difference in ms
    var timeDiff = endTime - startTime;

    // strip the miliseconds
    timeDiff /= 1000;

    // get seconds
    var seconds = Math.round(timeDiff % 60);

    // remove seconds from the date
    timeDiff = Math.floor(timeDiff / 60);

    // get minutes
    var minutes = Math.round(timeDiff % 60);

    // remove minutes from the date
    timeDiff = Math.floor(timeDiff / 60);

    // get hours
    var hours = Math.round(timeDiff % 24);

    show.innerHTML = hours + " h " + minutes + " min " + seconds + " sec";
    setTimeout(display, 1000);

};
*/


/*function createNewTimer(){
    var buttonPlaceholder = document.getElementsByClassName("timer-placeholder")[0];
    var timerDiv = document.createElement("DIV");
    buttonPlaceholder.appendChild(timerDiv);
    if (timerDiv){
        var lunchButton = document.createElement("INPUT");
        timerDiv.className = "timer";
        timerDiv.setAttribute("itemnum", itemNum);
        var numItem;
        itemNum = numItem;
        itemNum++;


        lunchButton.className = "lunch-button";
        lunchButton.setAttribute("type", "button");
        lunchButton.setAttribute("value", "start");
        buttonPlaceholder.insertBefore(lunchButton, timerDiv);

        if (lunchButton){
                lunchButton.addEventListener("click", lunchTimer(numItem));
        }

        // lunchButton.addEventListener("click", lunchTimer());
    }

    //var lunchButton = document.createElement("INPUT");
    //lunchButton.className = "lunch-button";
   ...