test

HTML

<div class="butts-container" style="float: left;width: 100%;">
   <div class="butts">1</div>
   <div class="butts">2</div>
</div>

<div class="car-container">
   <div class="car">
     <div class="box">1 CarBox</div>
   </div>
  <div class="car">
    <div class="box">2 CarBox</div>
  </div>
</div>

<div class="box">100 Box</div>
<div class="sum">Total</div>

CSS

body {background: #eeeeee;}

.car {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 $cars = $('.car');

$('.butts').on('click', e => {
  let $target = $cars.eq($(e.target).index()).show();  
  $cars.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`
}