JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" style="float: left;width: 100%;">
   <div class="butts">1 <div style="float:right;width:40px;height:20px;background:lightgreen;">1</div></div>
   <div class="butts">2 <div style="float:right;width:40px;height:20px;background:lightgreen;">2</div></div>
   <div class="butts">3 <div style="float:right;width:40px;height:20px;background:lightgreen;">3</div></div>
</div>

<div class="container">
   <div class="game">
     <div class="box">1 Box</div>
   </div>
  <div class="game">
    <div class="box">2 Box</div>
  </div>
    <div class="game">
    <div class="box">3 Box</div>
  </div>
</div>

<div class="sum"></div>

CSS

body {background: #eeeeee;}

.game {display:none;}

.box {float: left;font: bold 17px arial;text-align: center;margin: 10px 10px 20px 0;padding: 10px 25.54px;background: #fff;color: blue}

.butts {cursor:pointer; width:200px;height:40px;background:#fff; margin-bottom:10px; margin-right:10px; float:left;border:1px solid blue;}

.sum {clear:both;margin-top:40px;}

JavaScript

// Matches and shows Butts to Car index order.
let $games = $('.game');

$('.butts').on('click', e => {
  let $target = $games.eq($(e.target).index()).show();  
  $games.not($target).hide();
});

// Finds all Butts and calls `sumBoxes` onclick
const boxes = document.getElementsByClassName("butts");
for (let butts of boxes){ butts.addEventListener("click", sumBoxes); }

// sumBox Calculates each visible Box 
function sumBoxes(event) {
  var total = 0;
  $('.box:visible').each(function() {
    total += parseInt($(this).text());
  });
  $('.sum').html("Total : " + total); // Replaces contents of `.sum`
}