javascript - Why does it calculate same item number for different items?

Question

I want to make a total cost calculator...
This is my HTML

function closeSidebar() {
  document.getElementById("Sidebar").style.width = "0px";
}
function openSidebar() {
document.getElementById("Sidebar").style.width = "100%";
document.getElementById("Sidebar").style.height = "100%";
document.getElementById("Sidebar").style.display = "block";
}
function myFunction() {
globalFirstNum1 = 0
globalSecondNum1 = 0
z = globalFirstNum1 + globalSecondNum1;
document.getElementById("result").innerHTML =
"The total cost is " + z + ".";
}
function add() {
globalFirstNum1 = Number(50);
globalSecondNum1 = Number(60);
var result = globalFirstNum1 + globalSecondNum1;
var output = "The total cost is " + result;
            document.getElementById("result").innerHTML = output;
}

function add2() {
globalThirdNum1 = Number(40);
globalForthNum1 = Number(60);
var result = globalThirdNum1 + globalForthNum1;
var output = "The total cost is " + result;
            document.getElementById("result").innerHTML = output;
}
function myFunction(){
   document.getElementById("result").innerHTML = output;
}
function getSelectedRadioValue(name) {
  var radios = document.getElementsByName(name);
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      return radios[i].value;
    }
  }
}

function result() {
    var number = 0;
  var score = 0;
  score += parseInt(getSelectedRadioValue("q1")) || 0;
  score += parseInt(getSelectedRadioValue("q2")) || 0;
  score += parseInt(getSelectedRadioValue("q3")) || 0;
  score += parseInt(getSelectedRadioValue("q4")) || 0;
  score += parseInt(getSelectedRadioValue("q5")) || 0;
  score += parseInt(getSelectedRadioValue("q6")) || 0;
  score += parseInt(getSelectedRadioValue("q7")) || 0;
  score += parseInt(getSelectedRadioValue("q8")) || 0;
  score += parseInt(getSelectedRadioValue("q9")) || 0;
  score += parseInt(getSelectedRadioValue("q10")) || 0;
  score += parseInt(getSelectedRadioValue("q11")) || 0;
  score += parseInt(getSelectedRadioValue("q12")) || 0;
  score += parseInt(getSelectedRadioValue("q13")) || 0;
  score += parseInt(getSelectedRadioValue("q14")) || 0;
  score += parseInt(getSelectedRadioValue("q15")) || 0;
  number += document.getElementById('i1').value;
if (isNaN(number) || number < 1 || number > 10) {
    alert("The item count must be between 1 to 10...");
    document.getElementById("i1").value = "5";
  }
  document.getElementById('result').innerHTML=("Total Cost: " + score * number);
}
window.onload = function() {
  check.onclick = result;
}
function getSelectedRadioName(name) {
  var radios = document.getElementsByName(name);
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].unchecked) {
      return radios[i].name;
    }
  }
}

body{
 margin: 0px;
 background-color: gray;
}
input[type=number] {
         width: 60px;
         border: 2px solid black;
         margin-top: auto;
         top: 0;
         border-radius: 5px 5px 5px 5px;
    }
.box{
 width: 98.7%;
 height: 7%;
 background-color: #666666;
 padding: 10px 10px 10px 10px;
}
.boxhidden{
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1aff66;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  padding: 8px;
  background-color: transparent;
  border: none;
}
.button{
 padding: 0px;
 background-color: transparent;
 border: none;
 font-size: 26px;
}
.boxhidden a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.boxhidden a:hover {
  color: #f1f1f1;
  cursor: pointer;
}
hr{
  height: 2.5px;
  background-color: black;
}
table{
  background-color: white;
}
.table1{
  border-top: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  border-left: 2px solid black;
}

/*CHECKBOX!!!*/

input[type=checkbox] {
         position: relative;
         cursor: pointer;
         margin-right: 5;
         margin-top: 0; 
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

/*CHECKBOX END...*/

.table2{
  border-top: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  border-left: 2px solid black;
}
.table3{
  border-top: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  border-left: 2px solid black;
}
.table4{
  border-top: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  border-left: 2px solid black;
}
.table5{
  border-top: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  border-left: 2px solid black;
}
/*ScrollBar*/
::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-thumb {
  background: #0d0d0d;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4d4d4d;
}

<!DOCTYPE html>
  <link href="css/index.css" rel="stylesheet">
  <link href="js/index.js" rel="stylesheet">
<head>
  <link rel="icon" href="img/shopping-cart.png" type="image/icon type">
  <script type="text/javascript" src="js/index.js"></script>
   <title>Shopping App</title>
</head>
<body>
  <div class="box">
  
     <H1 align="center" style="margin: 0; color: black;">
       Online Shopping Mart!</H1>

  </div>
  <div class="boxhidden" id="Sidebar">
    <button class="closebtn" onclick="closeSidebar()">
      &times
    </button>

    <p id="r234esult"></p>
     <a>2 - two  </a>
     <a>3 - three</a>
  </div><br>
<div style="display: none;">  <button onclick="add()">Add</button>
  <button onclick="add2()">Add</button></div>
  <br><br>
  <center>
  <table>
  <tr>
    <th class=table1>
     <img src="img/elec-laptop.png" height="100px" width="180px">
     <br><p> <hr>LAPTOP &#8377;50,000
     <label class="radiobox">
     <input name="1" class="radio" onclick="result()" type="checkbox" value="50000" name="q4">
   </label></p>
   </th>
    <th class=table2>
      <img src="img/elec-tablet.png" height="100px" width="180px">
      <br> <p> <hr>TABLET &#8377;8,000
        <label class="radiobox">
        <input class="radio" onclick="result()" type="checkbox" value="8000" name="q5">
      </label></p>
</table>
<table>
    </th>
    <th class=table3>
      <img src="img/elec-cpu.png" height="100px" width="180px">
      <br> <p> <hr>CPU &#8377;10,000
      <label class="radiobox">
      <input class="radio" onclick="result()" type="checkbox" value="10000" name="q1">
    </label></p>

    </th>
    <th class=table4>
      <img src="img/elec-ipad.png" height="100px" width="180px">
      <br> <p> <hr>IPAD &#8377;20,000
        <label class="radiobox">
        <input class="radio" onclick="result()" type="checkbox" value="20000" name="q3">
      </label></p>
</table>
<h3>** Best Deal **</h3>
<table>
    </th>
    <th class=table5>
      <img src="img/elec-laptop2.png" height="200px" width="360px">
      <br> <p> <hr>LAPTOP &#x20B9;90,000
        <label class="radiobox">
        <input class="radio" onclick="result()" type="checkbox" value="90000" name="q2">
      </label></p>
    </th>
  </tr>
</table></CENTER>

<h1 align="center">FRUITS (PER kg)</h1>

<center>
<table>
<tr>
  <th class=table1>
   <img src="img/orange.png" height="100px" width="180px">
   <br><p> <hr>ORANGE &#8377;100
   <label class="radiobox">
   <input class="radio" onclick="result()" type="checkbox" value="100" name="q6">
 </label></p>
 </th>

  <th class=table2>
    <img src="img/potato.png" height="100px" width="180px">
    <br> <p> <hr> POTATO &#8377;38
      <label class="radiobox">
      <input class="radio" onclick="result()" type="checkbox" value="38" name="q7">
    </label></p>

  </th>
  </table>
<table>
  <th class=table3>
    <img src="img/tomato.png" height="100px" width="180px">
    <br> <p> <hr> TOMATO &#8377;65
    <label class="radiobox">
    <input class="radio" onclick="result()" type="checkbox" value="65" name="q8">
  </label></p>

  </th>

  <th class=table4>
    <img src="img/dragonfruit.png" height="100px" width="180px">
    <br> <p> <hr>DRAGON-FRUIT &#8377;70
      <label class="radiobox">
      <input class="radio" onclick="result()" type="checkbox" value="70" name="q9">
    </label></p>

  </th>
  </table>
  <h3>** Best Deal **</h3>
<table>
  <th class=table5>
    <img src="img/strawberries.png" height="200px" width="360px">
    <br> <p> <hr>STRAWBERRIES &#x20B9; 35
      <label class="radiobox">
      <input class="radio" onclick="result()" type="checkbox" value="35" name="q10">
    </label></p>
  </th>
</tr>
</table></CENTER>

<h1 align="center">CLOTH ITEMS</h1>

<center>
<table>
<tr>
  <th class=table1>
   <img src="img/cloth-coat.png" height="100px" width="180px">
   <br><p> <hr>COAT &#8377;1890
   <label class="radiobox">
   <input class="radio" onclick="result()" type="checkbox" value="1890" name="q11">
 </label></p>
 </th>

  <th class=table2>
    <img src="img/cloth-shirt.png" height="100px" width="180px">
    <br> <p> <hr>SHIRT &#8377;500
      <label class="radiobox">
      <input class="radio" onclick="result()" type="checkbox" value="500" name="q12">
    </label></p>

  </th>
  </table>
<table>
  <th class=table3>
    <img src="img/cloth-dress.png" height="100px" width="180px">
    <br> <p> <hr>DRESS &#8377;900
    <label class="radiobox">
    <input class="radio" onclick="result()" type="checkbox" value="9

Answer 1

等待大神答复