Jquery: calculation & variable is not displaying when checkbox checked

See more:

Javascript

HTML

PHP

jQuery

, +

Still learning JQuery. Still new to JQuery in fact. Trying to code is:

When the an items checkbox is checked, it calculates the service fee times years. then add the license fee to it. Finally it takes the total and times the quantity, which in then creates the item_cost.

If more than one item is checked, it will also calculate the item_cost and adds each checked item's cost, creating a total_item_cost. And, it will add each checked item's training hours, creating a total_training_hours.

Once item is done calculating, it will then display the item name, years, quantity, training hours, and total cost of each item that is checked at the bottom in the table. It will also display another table with total training hours and the the total cost of all items.

I have coded below but cannot seem to get the items to show in the table.

<script>
							
									
$(document).ready(function(){
	
	//hide tables until box is checked
            $('#add_item_here').hide();
            $('#add_totals_here').hide();		
	
        //First obtaining indexes for each checkbox that is checked
        $('input[id^=item_add]').change(function(){

            // get checkbox index
            var index = $(this).attr('id').replace('item_add','');

            //hide tables until box is checked
           //$('table[id=add_item_here]').hide();
            //$('table[id=add_totals_here]').hide();

            //If checkbox is checked, show tables, calculate item cost, get variables, calculate total cost, & calculate total training hours
            //$('input:checkbox').change(function(){ 

                //If check box is check do...
                if($(this).is(':checked')){

                    // Show totals tables
                    $('#add_item_here').show();
                    $('#add_totals_here').show();

                    // start at 0 for item_cost
                    var item_cost = 0;
                    var total_cost = 0;
                    $('input:checkbox:checked').each(function(){

                        // Calculating item cost for just that one checkbox
                        item_cost+=parseInt($('#servicefee'+index).val());
                        item_cost*=parseInt($('#yrs'+index).val()); 
                        item_cost+=parseInt($('#licensefee'+index).val());
                        item_cost*=parseInt($('#qty'+index).val()); 

                        // Get hidden variables to use for calculation and tables.
                        var item = $('#item'+index).val();
                        var traininghrs = parseInt($('#traininghrs'+index).val());
                        var qty = parseInt($('#qty'+index).val());
                        var yrs = parseInt($('#yrs'+index).val());
                    });

                    // start at 0 for total_costs
                    var total_cost = item_cost;
                    //Add item_cost with other item_costs to calculate total_cost
                    $('input:checkbox:checked').each(function(){
                        total_cost+= item_cost;
                    });

                    // start at 0 for total training hours
                    var total_training = 0;
                    //Add trianing hours with other training hours to calculate total_training
                    $('input:checkbox:checked').each(function(){
                        total_training+=parseInt($('#traininghrs'+index).val());
                    });
                }

                    //Display each item that is checked into a table
                    $('#add_item_here > tbody:last-child').append('' + item +'' + yrs +'' + qty +'' + traininghrs + ''+ item_cost + '');

                    //Display totals into table row into a table
                    $('#add_totals_here > tbody:last-child').append('' + total_training + ''+ total_cost + '');

            //});                                         

            // Quantity change, if someone changes the quantity
            $('#qty'+index).change(function(){
                $('input:checkbox').trigger('change');
            });

            // Years change, if someone changes the years           
            $('#yrs'+index).change(function(){
                $('input:checkbox').trigger('change');
            });                                         
        });           
    });
</script>

<center>
										



<table id="add_item_here" style="width: 98%">											<tbody>												<tr><td>Item</td><td>Years</td><td>Quantity</td><td>Training Hours</td><td>Total Item Cost</td></tr>												</tbody>										</table>
									</center>
									<center>
										



<table id="add_totals_here" style="width: 98%">											<tbody>												<tr><td></td><td>Total Cost</td></tr>												</tbody>										</table>
									</center>

What I have tried:

fixed the iteration.
updated the append. Still looking for answers