Updating :checkbox, updating a total, shipping, and item in html

I'm having some issues with this cart page i'm working on.

So: The scope of the project is to click some checkboxes, update the shipping, items ordered, and add to the total.

Process: My idea is this: Create a field of items with shipping identified with , which would have click events for both on state and off state, say if someone wants to uncheck a box and not order x product. Here is the code so far.

$(document).ready(function(){
/*  Array of prices*/
var myArray = [4.95, 5.87, 4.79];

Attempt at finding the # of checked boxes with the input name=      
/*  var result= $('input[type="checkbox"]:checked');*/
/*  $('input[name="trial"]').click(function(){
getCheckedCheckBoxes('trial');
})
  var getCheckedCheckBoxes = function(groupName){
  var result= $('input[name=""'+ groupName +'"]:checked');
  if(result.length>0){
  $('#div'+groupName).html("Mango Cleanse");
 }
}

$('#test').click(function(){
getCheckedCheckBoxes('trial');
})
*/

$('#test').on('click', function(){
/*    if(result.length>0){
$('.items').append("Mango Cleanse Trial"+'<br>');
} else{
$('.ship').html("$0.00");
var testVal = $('.test').val();
myArray.push(testVal);
$('.ship').html(eval(myArray.join('+')))*/

var testVal = $('#test').val();
var n= myArray[0];
var add= n+testVal;
$('.ship').html("$"+add);
$('.items').append("Mango Cleanse Trial"+'<br>');
}); 

var item = $('.test').val();
console.log(item);
});

Here is a link to my codepen