toddnestor/cart.html

## cart.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h3>Items</h3>
<ul class="display_items"></ul>
<hr>
<h3>Cart</h3>
<ul class="selector_goes_here"></ul>
<hr>
<strong class="total_cost_selector"></strong>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    var cart_items = [];

    var addToCart = function( item_id, qty ) {
        var item_existed = false;

        $.each( cart_items, function( key, value ) {
            if( value.item.id == item_id ) {
                cart_items[key].qty = parseInt( cart_items[key].qty ) + parseInt( qty );
                item_existed = true;
            }
        } );

        if( !item_existed ) {
            cart_items.push({
                item: findItem(item_id),
                qty: qty
            });
        }

        renderCart();
    }

    var removeFromCart = function( index ) {
        cart_items.splice( index, 1 );

        renderCart();
    }

    var possible_items = [
        {
            id: 1,
            title: 'item 1',
            description: 'this is a cool description',
            price: '27.00'
        },
        {
            id: 2,
            title: 'item 2',
            description: 'this is a cool description',
            price: '27.00'
        }
    ];

    var findItem = function( item_id ) {
        var item = false;

        $.each( possible_items, function( key, value ) {
            if( value.id == item_id )
                item = value;
        } );

        return item;
    }

    var renderCart = function() {
        var total_cost = 0;
        $('.selector_goes_here').html('');

        $.each( cart_items, function( key, item ) {
            this_cost = item.item.price * item.qty;

            $('.selector_goes_here').append(
                    $('<li>').html( item.qty + ' ' + item.item.title + ' ' + '$' + this_cost).append(
                            $('<button>').html('Remove').click(function(){
                                removeFromCart( key );
                            })
                    )
            )

            total_cost += this_cost;
        } );

        $('.total_cost_selector').html( 'Total: $' + total_cost );
    }

    $.each( possible_items, function( key, value ) {
        $('.display_items').append(
                $('<li>').html(
                        value.title + ': ' + value.price
                ).data( 'item-id', value.id ).append(
                        '<select><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>'
                ).append(
                        $('<button>').html('Add').click( function() {
                            addToCart( value.id, $(this).closest('li').find('select').val() );
                        })
                )
        )
    } );
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>
	<h3>Items</h3>
	<ul class="display_items"></ul>
	<hr>
	<h3>Cart</h3>
	<ul class="selector_goes_here"></ul>
	<hr>
	<strong class="total_cost_selector"></strong>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript">
	var cart_items = [];

	var addToCart = function( item_id, qty ) {
	var item_existed = false;

	$.each( cart_items, function( key, value ) {
	if( value.item.id == item_id ) {
	cart_items[key].qty = parseInt( cart_items[key].qty ) + parseInt( qty );
	item_existed = true;
	}
	} );

	if( !item_existed ) {
	cart_items.push({
	item: findItem(item_id),
	qty: qty
	});
	}

	renderCart();
	}

	var removeFromCart = function( index ) {
	cart_items.splice( index, 1 );

	renderCart();
	}

	var possible_items = [
	{
	id: 1,
	title: 'item 1',
	description: 'this is a cool description',
	price: '27.00'
	},
	{
	id: 2,
	title: 'item 2',
	description: 'this is a cool description',
	price: '27.00'
	}
	];

	var findItem = function( item_id ) {
	var item = false;

	$.each( possible_items, function( key, value ) {
	if( value.id == item_id )
	item = value;
	} );

	return item;
	}

	var renderCart = function() {
	var total_cost = 0;
	$('.selector_goes_here').html('');

	$.each( cart_items, function( key, item ) {
	this_cost = item.item.price * item.qty;

	$('.selector_goes_here').append(
	$('<li>').html( item.qty + ' ' + item.item.title + ' ' + '$' + this_cost).append(
	$('<button>').html('Remove').click(function(){
	removeFromCart( key );
	})
	)
	)

	total_cost += this_cost;
	} );

	$('.total_cost_selector').html( 'Total: $' + total_cost );
	}

	$.each( possible_items, function( key, value ) {
	$('.display_items').append(
	$('<li>').html(
	value.title + ': ' + value.price
	).data( 'item-id', value.id ).append(
	'<select><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>'
	).append(
	$('<button>').html('Add').click( function() {
	addToCart( value.id, $(this).closest('li').find('select').val() );
	})
	)
	)
	} );
	</script>
	</body>
	</html>