JSFiddle - React, Tailwind, and code Playground

HTML

<a href='#' id='start'>start</a>
<a href='#' id='stop'>stop</a>
<div id='content'></div>

JavaScript

var testField = function ($in) {
    var self = this, $input = $in;

    var onClick = function () { }
    var onCustom = function () { }

    this.Test = function () {
        $input.on('click', onClick);
        $input.on('custom', onCustom);
        return self;
    }

    this.Clean = function () {
        $input.off('click', onClick);
        $input.off('custom', onCustom);
        $input = null;
    }
}

var stop = false;
var drawItems = function () {
    var $content = $('#content');
    $content.empty();

    var len = 50;
    while (len--) {
        var $row = $("<div></div>").appendTo($content);
        var $input = $("<span>" + Math.random() + "</span>").appendTo($row);
        new testField($input).Test();//.Clean();
    }

    if (!stop) setTimeout(function () { drawItems(); }, 50);
}


$('#stop').click(function () {
    stop = true;
    return false;
});


$('#start').click(function () {
    stop = false;
    drawItems();
    return false;
});