JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <select id="store">
    <option value="A">Location A</option>
    <option value="B">Location B</option>
    <option value="C">Location C</option>
  </select>
</div>

<div class="box A">
  Location A <br>
  Select your items:
  <br>
  <input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
  <input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
  Total:<br>
  <input value="0" readonly="readonly" type="text" name="total" />
</div>

<div class="box B">
  Location B <br>
  Select your items:
  <br>
  <input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
  <input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
  Total:<br>
  <input value="0" readonly="readonly" type="text" name="total" />
</div>

<div class="box C">
  Location C <br>
  Select your items:
  <br>
  <input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
  <input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
  Total:<br>
  <input value="0" readonly="readonly" type="text" name="total" />
</div>

CSS

.hide {
  display: none;
}
.box {
  margin-top:30px;
}

JavaScript

document.querySelector("select#store").addEventListener("change", () => {
  display(event.target.value);
});

const boxs = document.querySelectorAll("div.box");


// Select box show/hide div
function display(value) {
  for (const box of boxs) {
    if (box.classList.contains(value)) {
      box.classList.remove("hide");
    } else {
      box.classList.add("hide");
    }
  }
}
display("A");


// Total the values of the checkboxes
function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementsByName("total")[0].value = total + "%";
}