JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Обработка события</title>
</head>

<body>
    <div id="allForms">
<div class="value">
<form>
<p>value 1: <span>1</span></p>
<p>value 2: <span>2</span></p>
<p>value 3: <span>3</span></p>
<button>кнопка</button>
</form>
</div><div class="value">
<form>
<p>value 1: <span>5</span></p>
<p>value 2: <span>16</span></p>
<p>value 3: <span>33</span></p>
<button>кнопка</button>
</form>
</div><div class="value">
<form>
<p>value 1: <span>1</span></p>
<p>value 2: <span>2</span></p>
<p>value 3: <span>3</span></p>
<button>кнопка</button>
</form>
</div><div class="value">
<form>
<p>value 1: <span>10</span></p>
<p>value 2: <span>20</span></p>
<p>value 3: <span>30</span></p>
<button>кнопка</button>
</form>
</div>
<div class="value">
<form>
<p>value 1: <span>2</span></p>
<p>value 2: <span>4</span></p>
<p>value 3: <span>6</span></p>
<button>кнопка</button>
</form>
</div>
<div id="sum">
<p>sum 1: <span>0</span></p>
<p>sum 2: <span>0</span></p>
<p>sum 3: <span>0</span></p>
<p>sum all: <span id="ss">0</span></p>
</div>
    </div>

    </body>
    
</html>

CSS

.value{float:left; margin: 0 10px; border:1px solid;}
   .sum{float:left; margin: 0 10px;}
   span{ font-weight: bold; color: blue;}
   span#ss{color:red;}

JavaScript

sum = document.getElementById('sum');
all = document.getElementById('ss');
arri=document.getElementById('allForms').getElementsByTagName('form');
arr = arri[0].getElementsByTagName('p');
for (var x=0; x<arri.length; x++) {
arri[x].onclick = function(event) {
        all.innerHTML = "0";
        event.preventDefault();
        for(var i=0; i<arr.length; i++) {
sum.getElementsByTagName('p')[i].getElementsByTagName('span')[0].innerHTML = parseInt(sum.getElementsByTagName('p')[i].getElementsByTagName('span')[0].innerHTML) + parseInt(event.target.parentNode.getElementsByTagName('p')[i].getElementsByTagName('span')[0].innerHTML);  
all.innerHTML = parseInt(all.innerHTML) + parseInt(sum.getElementsByTagName('p')[i].getElementsByTagName('span')[0].innerHTML);
        };
};
};