JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="myList">
    <li class="template"><span>template</span></li>
</ul>

CSS

.template {
    display: none !important;
}

#myList> li {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: red;
}

JavaScript

var myList = $("#myList");
var elementTemplate = myList.children("li.template");
for (var i = 0; i < 3; i++) {
    var newElement = elementTemplate.clone();
    newElement.removeClass("template");
    // the following .show() code line seems to do a .css("display", "list-item"); to the element for no reason, in jQuery 1.7.2, but not in jQuery 1.7.1.
    newElement.show();
    newElement.appendTo(myList);
    newElement.children("span").html(newElement.css("display"))
}
        
for (var i = 0; i < 3; i++) {
    var newElement = elementTemplate.clone();
    newElement.removeClass("template");
    // If we don't call .show(), they get the display fine, but the margins seem to be wrong for some reason.
    //newElement.show();
    newElement.appendTo(myList);
    newElement.children("span").html(newElement.css("display"))
}