JSFiddle - React, Tailwind, and code Playground

HTML

<table rules="all" cellspacing="10" cellpadding="10" style="margin-top:20px; border: 1px solid rgba(81, 71, 71, 0.24);">
							<tbody>
								<tr align="center">
									<td width="120px" height="110px">
										<p class="pifagor-char">111</p>
										<p class="stp">характер,</p>
										<p class="stp">сила воли</p>
									</td>
									<td width="120px" height="110px">
										<p class="pifagor-char">22</p>
										<p class="stp">энергетика,</p>
										<p class="stp">харизма</p>
									</td>
									<td width="120px" height="110px">
										<p class="pifagor-char">333</p>
										<p class="stp">познание,</p>
										<p class="stp">творчество</p>								
									</td>
									<td width="120px" height="110px">
										<p class="pifagor-char"></p>								
									</td>									
								</tr>
								<tr align="center">
									<td width="120px" height="110px">
										<p class="pifagor-char">—</p>
										<p class="stp">здоровье,</p>
										<p class="stp">красота</p>
									</td>
									<td width="120px" height="110px">
										<p class="pifagor-char">5</p>
										<p class="stp">логика,</p>
										<p class="stp">интуиция</p>
									</td>
										<td width="120px" height="110px">
										<p class="pifagor-char">—</p>
										<p class="stp">трудолюбие,</p>
										<p class="stp">мастерство</p>										
									</td>
									<td width="120px" height="110px">
										<p class="pifagor-char"></p>								
									</td>										
								</tr>
								<tr align="center">
									<td width="120px" height="110px">
										<p class="pifagor-char">—</p>
										<p class="stp">удача,</p>
										<p class="stp">везение</p>
									</td>
									<td width="120px" height="110px">
										<p class="pifagor-char">8</p>
										<p class="stp">чувство</p>
										<p class="stp">долга</p>
									</td>
									<td width="120px" height="110px">
										<p class="pifagor-char">99</p>
										<p...

CSS

#go-pif {
    background: rgba(23, 40, 40, 0.68);
    width: 205px;

    padding: 10px;
    cursor: pointer;
    margin-top: 10px;
    display: inline-block;

    color: white;
}

JavaScript

$("#go-pif").click(function(){
    function d(b) {
        return [].reduce.call(b + "", function(a, b) {
            return a + +b
        }, 0)
    }
  [].forEach.call(document.querySelectorAll("tr"), function(b) {
        var a = [].slice.call(b.querySelectorAll(".pifagor-char"));
        b = a.pop();
        a = a.reduce(function(a, b) {
            var c = +b.innerHTML || 0;
            12 < c && (c = d(c));
            return a + c
        }, 0);
        b.innerHTML = 12 < a ? d(a) : a
    })
})();