JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>1st parameter<br>
        <div name="barracent" class="bar"></div><div class="cent" name="cronocent">Loading...</div><div style="clear:both"></div></li>
    <li>2nd parameter<br>
        <div name="barracent" class="bar"></div><div class="cent" name="cronocent">Loading...</div><div style="clear:both"></div></li>
    <li>3rd parameter<br>
        <div name="barracent" class="bar"></div><div class="cent" name="cronocent">Loading...</div><div style="clear:both"></div></li>
    <li>4th parameter<br>
        <div name="barracent" class="bar"></div><div class="cent" name="cronocent">Loading...</div><div style="clear:both"></div></li>
    <li>5th parameter<br>
        <div name="barracent" class="bar"></div><div class="cent" name="cronocent">Loading...</div><div style="clear:both"></div></li>
    <li>6th parameter<br>
        <div name="barracent" class="bar"></div><div class="cent" name="cronocent">Loading...</div><div style="clear:both"></div></li>
    <li>7th parameter<br>
        <div name="barracent" class="bar"></div><div class="cent" name="cronocent">Loading...</div><div style="clear:both"></div></li>
    <li>8th parameter<br>
        <div name="barracent" class="bar"></div><div class="cent" name="cronocent">Loading...</div><div style="clear:both"></div></li>
    <li>9th parameter<br>
        <div name="barracent" class="bar"></div><div class="cent" name="cronocent">Loading...</div><div style="clear:both"></div></li>                  
</ul>

CSS

.bar {
    margin: 2px 5px 0 0;
    width: 0;
    height: 12px;
    background-color: #A4010D;
    float: left;
}

JavaScript

var value1 = 11.2;
    var value2 = 43.7;
    var value3 = 65.8;
    var value4 = 100;
    var value5 = 78.5;
    var value6 = 8.7;
    var value7 = 91.4;
    var value8 = 33.2;
    var value9 = 27.9;
    var final = 2.65; 
    var multiplier = document.getElementsByName('cronocent');
    var barracent = document.getElementsByName('barracent');
    var bar1 = value1 * final + 'px';
    var bar2 = value2 * final + 'px';
    var bar3 = value3 * final + 'px';
    var bar4 = value4 * final + 'px';
    var bar5 = value5 * final + 'px';
    var bar6 = value6 * final + 'px';
    var bar7 = value7 * final + 'px';
    var bar8 = value8 * final + 'px';
    var bar9 = value9 * final + 'px';
    
    if (barracent[0].style.width != '0'){
        multiplier[0].innerHTML = value1+'%';
    }
    if (barracent[1].style.width != '0'){
        multiplier[1].innerHTML = value2+'%';
    }
    if (barracent[2].style.width != '0'){
        multiplier[2].innerHTML = value3+'%';
    }
    if (barracent[3].style.width != '0'){
        multiplier[3].innerHTML = value4+'%';
    }
    if (barracent[4].style.width != '0'){
        multiplier[4].innerHTML = value5+'%';
    }
    if (barracent[5].style.width != '0'){
        multiplier[5].innerHTML = value6+'%';
    }
    if (barracent[6].style.width != '0'){
        multiplier[6].innerHTML = value7+'%';
    }
    if (barracent[7].style.width != '0'){
        multiplier[7].innerHTML = value8+'%';
    }
    if (barracent[8].style.width != '0'){
        multiplier[8].innerHTML = value9+'%';
    }
    
    $(function() {
        $(barracent[0]).stop().animate({'width': bar1 },1200);
        $(barracent[1]).stop().animate({'width': bar2 },1200);
        $(barracent[2]).stop().animate({'width': bar3 },1200);
        $(barracent[3]).stop().animate({'width': bar4 },1200);
        $(barracent[4]).stop().animate({'width': bar5 },1200);
        $(barracent[5]).stop().animate({'width': bar6 },1200);
        $(barracent[6]).stop().animate({'width': bar7...