JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dataContainer">
	<div>event.type: <span id="s0">-</span></div>
	<div>Value: $ <span id="s1">-</span></div>
	<div>Change: $ <span id="s2">-</span></div>
	<div>Timestamp: <span id="s3">-</span></div>
</div>
<div>
	<button id="start">Start</button>
	<button id="stop">Stop</button>
</div>

CSS

div {
    padding: 5px 0;
}

JavaScript

$(function() {
	//attach a custom event handler to the document
	$(document).on('valueChange', function (evt) {
		$(this).find("#s0").text(evt.type);
		$(this).find("#s1").text(evt.value);
		$(this).find("#s2").text(evt.change);
		$(this).find("#s3").text(evt.timestamp).toLocaleString();
	});

	//customEvent(): a utility function that returns a jQuery Event, with a custom type and data properties
	function customEvent(type, data) {
		return $.extend($.Event(type||''), data||{});
	};

	//randomUpdate(): fetches data and broadcasts it in the form of a 'changeValue' custom event
	//(for demo purposes, the data is randomly generated randomly)
	function randomUpdate() {
		var event = customEvent('valueChange', {

           value: (10 + Math.random() * 20).toFixed(2),
			change: (-3 + Math.random() * 6).toFixed(2),
			timestamp: new Date()
		});
		$(document).trigger(event);//broadcast the event to the document
	}

	var interval;

	$("#start").on('click', function() {
		randomUpdate();//initial call ...
		interval = setInterval(randomUpdate, 2000);//... then update every 2 seconds
		$(this).prop('disabled', true).next('button').prop('disabled', false);
	});
	$("#stop").on('click', function() {
		clearInterval(interval);
		$(this).prop('disabled', true).prev('button').prop('disabled', false);
	}).prop('disabled', true);
});