I'm building a simple shopping cart where visitors can select a few items they want, click on the "Next" button, and see the confirmation list of things they just selected. I would like to have the confirmation list shown on each line for each item selected.

HTML selection

<div id="c_b">
  <input type="checkbox" value="razor brand new razor that everyone loves, price at $.99" checked> 
  <input type="checkbox" value="soap used soap for a nice public shower, good for your homies, price at $.99" checked>
  <input type="checkbox" value="manpacks ultimate choice, all in 1, price at $99">
</div>  

<button type='button' id='confirm'>Next</button>

HTML confirmation list

<div id='confirmation_list' style='display:none;'>
<h2>You have selected item 1</h2>
<h2>Your have selected item 2 </h2>
</div>

JS

$(function(){
   $('#confirm').click(function(){
    var val = [];
    $(':checkbox:checked').each(function(i){
      val[i] = $(this).val();
    });
  });
});

I ultimately want to replace the words 'Your have selected item 2' in h2s with the values selected from each check box. With the code above I'm able to collect the values of each checkbox into an array val, but having difficulty looping through and displaying them.

Any advice would be appreciated.