Checkbox Value Subtotals

I'm trying to create a series of checkboxes per color deck and have a subtotal appear for each one based on which checkboxes are checked. I can't seem to make the calculation appear per color deck. Help?

var total = 0;

let colorArray = ["Yellow", "Blue", "White", "Green", "Red"];
let numberArray = [2, 3, 4, 5, 6, 7, 8, 9, 10];

function titleDeck(item) {
  let title= document.createElement("h4"); 
  title.append(item);
  document.body.append(title);
}

function numberDeck(color) {
  for (let i=0; i < numberArray.length; i++) {
   document.write('<input type="checkbox" value=' + numberArray[i] + 'onClick="subtotalDeck(this, \'' + color + '\')" />' + numberArray[i]);
  } 
}

function subtotalDeck(item, color) {
  if (item.checked) {
    total+= parseInt(item.value);
  } else {
    total-= parseInt(item.value);
  }
}

function createDeck() {
  for (let c=0; c < colorArray.length; c++) {
    let color = colorArray[c];
    let subtotal= document.createElement("p");

    titleDeck(color); // Adds Title
    numberDeck(color); // Adds Input Items

    subtotal.innerHTML = 'Subtotal: ' + total; 
    document.body.append(subtotal);
  }
}

createDeck();