JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="content">
        <div class="score">1</div>
        <div class="score">2.5</div>
        <div class="score">1.5</div>
        <div class="score">1.5</div>
        <div class="score">2</div>
    </div>
</div>

<div class="wrapper">
    <div class="content">
        <div class="score">2.5</div>
        <div class="score">3.5</div>
        <div class="score">4</div>
        <div class="score">1.5</div>
        <div class="score">1</div>
    </div>
</div>

<div class="wrapper">
    <div class="content">
        <div class="score">4</div>
        <div class="score">1.5</div>
        <div class="score">2.5</div>
        <div class="score">2</div>
        <div class="score">1.5</div>
    </div>
</div>

CSS

.result {
    color: #f00;
}

JavaScript

var content = document.querySelectorAll('.wrapper .content');
Array.prototype.forEach.call(content, function (el) {
    var score = el.querySelectorAll('.score'),
        resultElement = document.createElement('div'),
        sum = 0;
    
    Array.prototype.forEach.call(score, function (el) {
        sum += Number(el.textContent, 10);
    });

    resultElement.className += 'result';
    resultElement.textContent = sum;
    el.appendChild(resultElement);
});