Sam's Store

HTML

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <title>Sam's Online Electronics Store</title>
 <!-- Set the viewport so this responsive site displays correctly on mobile devices -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Page title </title>
 <!-- Include bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" 
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<style type="text/css">
	#main-heading{font-size: 30px; font-weight: bold; color: #fff;}
	#heading {background-color: gray;}
	.product-heading{font-size: 20px; color: #fff;}
	.cost {font-size: 18px; text-align: right;}
	
	#category {width: 50%; }
	#product-list-head {background-color: #333; color: #fff; font-weight: bold; }
	#product-list {}
	#th-product{width: 20%;}
	.product-section {width: 300px;}
	.final-amounts {width: 66%; align: right;}
	.cart-style{
		
		border-color: black;
		border-width: 2px; 
		border-bottom-style: solid;
	}
	.floating {
		position: fixed;
		z-index = 0;
		top: 0;
		right: 0;
	}
	.right-j {text-align: right;}

	
	
</style>
</head>
<body>
<div...

JavaScript

$(document).ready(function(){

	function Product(type, name, description, price){
		this.type = type;
		this.name = name;
		this.description = description;
		this.price = price;
		this.quantity = 0;
	}
	
	var product_list = [];
	var cart = [];
	
	product_list.push(new Product('electronics', 'Audio Technica ATH-M50x', 'Critically acclaimed sonic performance praised by top audio engineers and pro audio reviewers, Exceptional clarity throughout an extended frequency range, with deep, accurate bass response', '119.99'));
	product_list.push(new Product('electronics', 'Sennheiser HD 202 II', 'Very clean, deep bass response,Jack plug 3.5/6.3 mm stereo', '24.50'));
	product_list.push(new Product('electronics', 'GPX HM3817DTBK Micro System', 'High Quality, Durable CLOCK,WALL-MOUNTBLE, Protable Design', '135.99'));
	product_list.push(new Product('electronics', 'Samsung MX-J630 2.0 Channel 230 Watt System', '200 W (2.0 channel), Speaker Driver Size: 5.25"', '117.99'));
	product_list.push(new Product('electronics', 'M-Audio Bass Traveler', 'Battery-powered amplifier increases sound quality for up to two sets of headphones', '29.00'));
	product_list.push(new Product('electronics', 'HLED Strip light kit', 'MECO Flexible LED Strip Waterproof Full Color Changing Strip Light 5Meter 16.4ft ', '17.95'));
	product_list.push(new Product('movies', 'Spectre', 'A cryptic message from Bond\'s past sends him on a trail to uncover a sinister organization. While M battles political forces to keep the secret service alive, Bond peels back the layers of deceit to reveal the terrible truth behind SPECTRE.', '19.99' ));
	product_list.push(new Product('movies', 'Finding Dory', 'Dory, the forgetful blue tang, sets off on an epic adventure to find her family in a movie overflowing with humor and heart', '19.99'));
	product_list.push(new Product('movies', 'Mission: Impossible - Rogue Nation', 'With the IMF disbanded, Ethan and his team join forces with a disavowed British agent, who may or may not...