JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div id="data" data-receiver="10"></div>
    <strong>Output:</strong>
    <span id="output"></span>
    <br/><br/> 
    <a href="#" id="random">Randomize</a>
</div>

CSS

#content {
    background: #efefef;
    margin: 40px auto;
    display: block;
    padding: 50px;
    width: 50%;
}

JavaScript

// Ranomize Number & Replace Variable
$(function () {
    
    var output = $('#output');
    
    var process = function process(next) {
        var num = Math.random() * 100;
        $(this).data("receiver", num);
        return next()
    };
    
    var update = function update() {
    $(this).promise("process").then(function(received) {
        console.log(received.data("receiver"));
        output.html(received.data("receiver"));
        received.queue("process", process);
        console.log(received, received.queue("process"))
    });
    };
    
    // queue first call to `process`
    $("#data").queue("process", process);
    
    $("#random").click(function (e) {
        e.preventDefault();        
        update.call($("#data").dequeue("process"))        
    });


// Receive Data & Output

    
    

    // Not sure what to do next
});