JSFiddle - React, Tailwind, and code Playground

by Mohamed Amer

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{
    background : #005eff;
    color: #fff;
}

JavaScript

$(document).ready(function(){
    $('.content').each(function(){
        var total = 0;
        $(this).find('> .score').each(function(){
            total += parseFloat($(this).text());
        });
        $(this).append('<div class="result">' + total  + '</div>');
    });
});