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 class="value">
<form>
<p>value 1: <span id="i1">1</span></p>
<p>value 2: <span id="i2">2</span></p>
<p>value 3: <span id="i3">3</span></p>
<button>кнопка</button>
</form>
</div>
<div class="value">
<form>
<p>value 1: <span id="i1">2</span></p>
<p>value 2: <span id="i2">4</span></p>
<p>value 3: <span id="i3">6</span></p>
<button>кнопка</button>
</form>
</div>
<div id="sum">
<p>sum 1: <span id="i1">0</span></p>
<p>sum 2: <span id="i2">0</span></p>
<p>sum 3: <span id="i3">0</span></p>
<p>sum all: <span id="ss">0</span></p>
</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');
arr = document.forms[0].getElementsByTagName('p');
all = document.getElementById('ss');
document.forms[0].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(document.forms[0].getElementsByTagName('p')[i].getElementsByTagName('span')[0].innerHTML);  
all.innerHTML = parseInt(all.innerHTML) + parseInt(sum.getElementsByTagName('p')[i].getElementsByTagName('span')[0].innerHTML);
    };
};

document.forms[1].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(document.forms[1].getElementsByTagName('p')[i].getElementsByTagName('span')[0].innerHTML);  
all.innerHTML = parseInt(all.innerHTML) + parseInt(sum.getElementsByTagName('p')[i].getElementsByTagName('span')[0].innerHTML);
    };
};