Radio Buttons/Checkboxes/select option- Adding price(value) total of chosen item, and also adding them in an array

So i want to get the value of all selected or checked inputs(checkboxes, radio buttons, select options) and sum them together. But i also want these values to be inserted into an array and to change the value in the array, if it was deselected or unchecked.

var gh=[];
$('#CheckBoxList').on('change', 'input[type=checkbox]', function() {

  var id = $(this).val(); // this gives me null
  var index = gh.indexOf(id);
  
  if($(this).is(':checked')){
    gh.push(id);
    document.getElementById("demo").innerHTML='['+gh+']';
  }
  else{
    if (index > -1) {
      gh.splice(index, 1);
      document.getElementById("demo").innerHTML='['+gh+']';
    }
  }
console.log(gh);


var sum = 0;
var gn, elem;
var gn, elem;
for (i=0; i<5; i++) {
  gn = 'game'+i;
  elem = document.getElementById(gn);
  if (elem.checked == true) { sum += Number(elem.value); }
}
document.getElementById('totalcost').value = sum.toFixed(2);
 



});

$('#RadioButtonList').on('change', 'input[type=radio]', function() {

  var id = $(this).val(); // this gives me null
  var index = gh.indexOf(id);
  
  if($(this).is(':checked')){
    gh.push(id);
    document.getElementById("demo").innerHTML='['+gh+']';
  }
  else{
    if (index > -1) {
      gh.splice(index, 1);
      document.getElementById("demo").innerHTML='['+gh+']';
    }
  }
console.log(gh);


 



});

$('#quantity').change(function() {

  var id = $(this).val(); // this gives me null
  var index = gh.indexOf(id);
  
  if($(this).is(':checked')){
    gh.push(id);
    document.getElementById("demo").innerHTML='['+gh+']';
  }
  else{
    if (index > -1) {
      gh.splice(index, 1);
      document.getElementById("demo").innerHTML='['+gh+']';
    }
  }
console.log(gh);


 



});

<!-- partial:index.partial.html -->
<div id="CheckBoxList">
  <label><input type="checkbox" id='game0' value="1" name="Apple">Apple</label>
  <label><input type="checkbox" id='game1' value="2" name="Orange">Orange</label>
  <label><input type="checkbox" id='game2' value="3" name="Pineaple">Pineaple</label>
  <label><input type="checkbox" id='game3' value="4" name="Lemon">Lemon</label>
  <label><input type="checkbox" id='game4' value="5" name="Mango">Mango</label>
</div>

<div id="RadioButtonList">
  <label><input type="radio" id='pad' value="6" name="HI">Small Cup</label>
  <label><input type="radio" id='pad' value="7" name="HI">Medium Cup</label>
  <label><input type="radio" id='pad' value="8" name="HI">Big Cup</label>
</div>
<div id="SelectOptions">
  <select name="quantity" id="quantity">
    <option value="">Select quantity</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>



<code id="demo"></code>


total cost<input type="text" id="totalcost" value="">
<br>total Checked<input type="text" id="checkedcount" value="">
<br>total boxes<input type="text" id="totalcount" value="">

So far i have been able to be successful in the checkboxes. But i am finding it diffcult to include the radio buttons and select option input to continue summation and also append the array of the checkboxes. I need your help. Thanks