JSFiddle - React, Tailwind, and code Playground

HTML

When button has value of "Start Clock" and button is pushed:
      <li>The clock information is shown in the textfield</li>
      <li>The value of the button changes to "Stop Clock"</li>
    When the button has the value "Stop Clock" and button is pushed
      <li>The clock information stops in the textfied</li>
      <li>The button value changes to "Start Clock"</li>

    <input type="text" id="clocktext"/>
    <input type="button" id="clockb" value="Start Clock"/>

JavaScript

function myclock() {
    var date = new Date(); // Get the current date/time
    var hour = date.getHours(); // Save hours
    var min = date.getMinutes(); // Save minutes
    var sec = date.getSeconds(); // Save seconds
    formathour = format(hour); // Format hours
    formatmin = format(min); // Format minutes
    formatsec = format(sec); // Format seconds
    timeout = setTimeout(myclock, 1000);
}

function format(x) {
    if (x < 10) x = "0" + x;
    return x;
}

var c;

$("#clockb").click(function() {
    var started = $(this).data('started');
    $(this).data('started', !started);
    if (!started) {
        c = setInterval(setTheTime, 1000);
        $(this).data('started', true).prop('value', 'Stop Clock');
    }
    else {
        $(this).data('started', false).prop('Start Clock');
        clearInterval(c);
    }
});

function setTheTime() {
    myclock();
    var curTime = formathour + ":" + formatmin + ":" + formatsec // Current time formatted
    $("#clocktext").prop('value', curTime);
}