JSFiddle - React, Tailwind, and code Playground

by Sean Rose

HTML

<h1 id='output'></h1>

<title>FORM</title>
<form id="frm">
    <input id="txt" type="text" placeholder="Type something tasty..." name="text">
    <label>1 at a time:
        <input id='autoListen' type="checkbox" name="autoListen">
    </label>
    <input id='submitBtn' type="submit" value="OK">
        <div class="controlbox">
        <div class="container"></div>
        </div>
</form>

CSS

.controlbox {
    width: 250px;
    margin: 0 auto;
    background-color: #CCC;
    border: 1px solid #b8b8b8;
    padding: 5px;
}

.container {
    background-color: #fff;
    height: 150px;
    padding: 5px;
}

JavaScript

$(document).ready(function () {
    var txtBox = $('#txt');
    var frm = $('#frm');
    var output = $('#output');
    var subBtn = $('#submitBtn');
    var container = [];
    var oldHandle;

    frm.submit(function (event) {
        event.preventDefault();
        container.push(txtBox.val());

        var result = txtBox.val();
        function updateControl(text){
            $(".container").append(text);
        }
        var lineResult = "<p>" + result + "</p>";
        updateControl(lineResult);
        
        var i = 0;
        clearInterval(oldHandle);
        oldHandle = setInterval(function () {
            output.text(container[i]);
            console.log(container[i]);
            i++;
            if (i == container.length) {
                i = 0;
            }
        }, 2500)

        txtBox.val('');
    });

    $('#autoListen').click(function () {

        if ($('#autoListen').is(':checked')) {

            subBtn.hide();
            output.text(txtBox.val());

            txtBox.keyup(function () {
                output.text(txtBox.val());
            })

        } else {
            subBtn.show();
            txtBox.unbind('keyup');
        }
    });
    
    $(".controlbox").on('dblclick', 'p', function() {
        $(this).closest('p').remove();
    });
    
});