JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="theList">
    <li>thin</li>
    <li style="display:none;">a hidden li</li>
    <li>a thick li</li>
    <li>an even thicker li</li>
</ul>

<p>List items:<br><span id="theListItems"></span></p>
<p>Total width: <span id="totalWidth"></span></p>

JavaScript

var totalWidth = 0;

$('#theList li').each(function() {
    var $this = $(this);
    totalWidth += $this.width();
    
    $('#theListItems').append($this.text() + " ("  +$this.width() + " width)<br>");
    $('#totalWidth').html(totalWidth);
});