adding the product to cart table in different page
<p>I am making a shopping cart. </p>

<p>This is the code where a user clicks on a dd to cart button to add items to the cart table:</p>

<pre><code>    &lt;div class="container"&gt;
&lt;a class="addToCart" href="#" data-name="Java" data-price="150"&gt;&lt;a/&gt;
&lt;img src="1.jpeg" id="book1" width="200" height="175" /&gt;
    &lt;div class="center"&gt;Java Basics&lt;/div&gt;
    &lt;p&gt; 150 SAR &lt;/p&gt;
            &lt;div&gt;
                &lt;label for="qty-1"&gt;Quantity&lt;/label&gt;
                &lt;input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/&gt;
            &lt;/div&gt;
            &lt;p&gt;&lt;input id="addToCart" type="submit" value="Add to cart" class="btn"/&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;div class="container1"&gt;
&lt;a class="addToCart" href="#" data-name="PHP" data-price="100"&gt;&lt;a/&gt;
&lt;img src="1.jpeg" id="book1" width="200" height="175" /&gt;
    &lt;div class="center"&gt;PHP Basics&lt;/div&gt;
    &lt;p&gt; 100 SAR &lt;/p&gt;
            &lt;div&gt;
                &lt;label for="qty-1"&gt;Quantity&lt;/label&gt;
                &lt;input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/&gt;
            &lt;/div&gt;
            &lt;p&gt;&lt;input id="addToCart" type="submit" value="Add to cart" class="btn"/&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;div class="container2"&gt;
&lt;a class="addToCart" href="#" data-name="PHP" data-price="100"&gt;&lt;a/&gt;
&lt;img src="1.jpeg" id="book1" width="200" height="175" /&gt;
    &lt;div class="center"&gt;JavaScript Basics&lt;/div&gt;
    &lt;p&gt; 200 SAR &lt;/p&gt;
            &lt;div&gt;
                &lt;label for="qty-1"&gt;Quantity&lt;/label&gt;
                &lt;input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/&gt;
            &lt;/div&gt;
            &lt;p&gt;&lt;input id="addToCart" type="submit" value="Add to cart" class="btn"/&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>with this jQuery script: 
and I have javascript file that contains function of the cart like add to cart, remove from car and calculating total. </p>

<pre><code>    &lt;script src="js/functions.js"&gt;&lt;/script&gt;
&lt;script&gt;

// some jQuery function added to the links

$("#totalCart").html();

$(".addToCart")click(function(event){
eventpreventDefault(); //prevent the links from doing the default behaviour when they are clicked 
var name= $(this).att("data-name"); //this represents the link that you click on / attr to access one of the attributes
var price= Number($(this).att("data-price"));

addItemtoCart(name, price, 1); 
displayCart();
});

function displayCart() {  //display cart content into the page as a list 
var cartArray = listCart();
var output = "" ; 
for ( var i in cartArray) { 
output += "&lt;li&gt;" +cartArray[i].name+"  "+cartArray[i].quantity+"&lt;/li&gt;"
}
$("#showCart").html(output);  //html(output) to replace everything in showCart with text we want
$("#totalCart").html(total Cart());
}
</code></pre>

<p>and this the cart.html </p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id="shopping-cart" action="cart.html" method="post"&gt;

&lt;table style="width:80%"&gt;
  &lt;tr&gt;
    &lt;th&gt; Item &lt;/th&gt;
    &lt;th&gt; Quantity &lt;/th&gt; 
    &lt;th&gt; Price &lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>my question is that I want to link add to cart button to the cart.html page with implementing the functions, I do not know how to glue them all together. Using only HtML, JavaScript and a little bit of jQuery. </p>

<p>PS: no database is used.</p>