JSFiddle - React, Tailwind, and code Playground

by Roberto Ramirez

HTML

<div class="tlist uno">
    <span>
        <a class="ntd">X</a>a
    </span>
</div>
<div class="tlist dos">
    Hola
</div>
<div class="tlist tres"></div>
<div class="tlist cuatro">
        
</div>
<div class="messages">
</div>

CSS

.tlist
{
    border-bottom: 1px solid silver;
    border-right: 1px solid silver;
    height: 20px;
    padding: 5px;
    width: 200px;
}
.tlist .msj
{
    float: right;
    font-weight: bold;
}

JavaScript

var tlist_1 = $('.tlist.uno').html().replace(/\s/ig, '').length;
var tlist_2 = $('.tlist.dos').html().replace(/\s/ig, '').length;
var tlist_3 = $('.tlist.tres').html().replace(/\s/ig, '').length;
var tlist_4 = $('.tlist.cuatro').html().replace(/\s/ig, '').length;

$('<span class="msj">' + tlist_1 + '</span>').appendTo('.tlist.uno');
$('<span class="msj">' + tlist_2 + '</span>').appendTo('.tlist.dos');
$('<span class="msj">' + tlist_3 + '</span>').appendTo('.tlist.tres');
$('<span class="msj">' + tlist_4 + '</span>').appendTo('.tlist.cuatro');