JSFiddle - React, Tailwind, and code Playground

HTML

<div style="float:left;padding:10px 30px;background:white">Number of Products</div>
<div style="float:left;padding:10px 30px;background:yellow"> <b><span id="numOfProducts">&nbsp;</span></b>

</div>
<div style="padding:50px;">
    <center style="width:100%;">
        <ul class='ProductList List Clear'>
            <li>Product</li>
            <li>Product</li>
        </ul>
    </center>
    <center>
        <button class="addProduct">+ Add Product</button>
    </center>
</div>

CSS

.ProductList li {
    list-style: none
}

JavaScript

function handleProductList() {
    if (jQuery('ul.ProductList > *').size() !== "undefined") {
        var ProductListNum = jQuery('ul.ProductList > *').size();
        console.log(ProductListNum);
        jQuery('#numOfProducts').html(ProductListNum);
    }
}

setInterval("handleProductList();", 1800);

jQuery(document).ready(function () {
    jQuery('.addProduct').click(function () {
        jQuery('.ProductList').append('<li> Product </li>');
        handleProductList();
    });
});