JSFiddle - React, Tailwind, and code Playground

by Bhupesh Kushwaha

HTML

<div class="layer">
    <div class="layer-info">Result</div>
</div>
<span class="score-java">9.8</span>

<div class="layer">
    <div class="layer-info">Result</div>
</div>
<span class="score-java">4.3</span>

<div class="layer">
    <div class="layer-info">Result</div>
</div>
<span class="score-java">2.1</span>

CSS

.layer-info {
    background-color: #C00;
    color: #EEE;
}

JavaScript

$('.score-java').each(function() {
    var score = $(this).text();
    $(this).prev('.layer').find(".layer-info").css('width', parseFloat(score) * 10 + '%');
});