JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<h2>Prototype from jqXHR</h2>
<ul id="ajax"></ul>
</div>
<div>
<h2>Prototype from Deferred</h2>
<ul id="deferred"></ul>
</div>

CSS

div {
    float: left;
    padding-left: 5px;
    border-left: 2px solid #444;
    margin-left: 5px
}
h2 {
    font-size: 120%
}

.injqXHR {
    color: green
}

JavaScript

var jqXHR = $.ajax();
var deferred = jQuery.Deferred();
var jqXHRasArray = [];

for (o in jqXHR) {
    $('#ajax').append('<li>' + o + '</li>');
    jqXHRasArray.push(o);
}
        
for (o in deferred) {
    var liToAppend = $('<li>'+ o +'</li>');
    liToAppend.toggleClass('injqXHR', -1 !== jqXHRasArray.indexOf(o));
    $('#deferred').append(liToAppend);
}