Javascrip Confusion : 

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    body{
    	margin:0;
    	padding:0;
    	line-height: 1.5em;
    	background: #782609 url(images/body_bg.jpg) repeat-x;
    	font-size: 11px;
    	font-family: Arial, Helvetica, sans-serif;
    }
    a:link, a:visited { color: #621c03; text-decoration: none; font-weight: bold;} 
    a:active, a:hover { color: #621c03; text-decoration: none; font-weight: bold; }

    h1 {
    	font-size: 22px;
    	color: white;
    	font-weight: bold;
    	height: 27px;
    	padding-top: 40px;
    	padding-left: 70px;
    }

    h2 {
    	font-size: 13px;
    	font-weight: bold;
    	color: #fff;
    	height: 22px;
    	padding-top: 3px;
    	padding-left: 5px;
    	background: url(images/h2.jpg) no-repeat;
    }

    #maincontainer{
    	width: 1000px;
    	margin: 0 auto;
    	float: left;
    }

    #topsection{
    	background: url(images/header.jpg) no-repeat;
    	height: 283px;
    }

    #title{
    	margin: 0;
    	padding-top: 150px;
    	padding-left: 50px;
    	color: #FFFFFF;
    	font-size: 24px;
    	font-weight: bold;
    }

    #slogan {
    	margin-top: 10px;
    	padding-left: 50px;
    	font-size: 12px;
    	font-weight: bold;
    	color: #ff9a59;
    }

    #left_column {
    	float: left;
    	width: 229px;
    }
    #menu_top {
    	float: left;
    	height: 33px;
    	width: 229px;
    	background: url(images/menu_top.jpg) no-repeat;
    }
    #right_column {
    	float: right;
    	width: 651px;
    	padding-right: 20px;
    	height: auto
    }
    #destination {
    	float: left;
    	padding: 10px 10px 0px 40px;
    	width: 280px;
    	border-right: dotted 1px #782609;
    }
    #search {
    	float: right;
    	padding: 0px 30px 0px 0px;
    	width: 262px;
    	background: url(images/form-bg.jpg) repeat-y;
    }
    .search_top {
    	background: url(images/=search.jpg) no-repeat;
    	width: 262px;
    	height: 76px;
    }
    .search_mid {
    	margin: 0px;
    	padding-left: 10px;
    	padding-top: 0px;
    }
    .search_bot {
    	background: url(images/search_bot.jpg) no-repeat;
    	height: 11px;
    }
    #contact {
    	width: 200px;
    	height: 96px;
    	background: url(images/contact.jpg) no-repeat;
    	color: #fff;
    	padding-left: 29px;
    	padding-top: 15px;
    }
    #bot {
    	float: left;
    	height: 22px;
    	width: 877px;	
    }
    #footer{
    	float: left;
    	width: 100%;
    	padding-top: 16px;
    	height: 31px;
    	color: #fff;
    	text-align: center;
    	background: url(images/footer_bg.jpg) repeat-x;
    }
    #footer a {
    	color: #fff;
    	font-weight: bold;
    }
    .menu {
    	margin-top: 40px;
    	width: 210px;
    }
    .menu li{
    	list-style: none;
    	height: 30px;
    	display: block;
    	background: url(images/menu_bg.jpg) no-repeat;
    	font-weight: bold;
    	font-size: 12px;
    	padding-left: 30px;
    	padding-top: 7px;
    }
    .menu a {
    	color: #fff;
    	text-decoration: none;
    }
    .menu a:hover {
    	color: #f08661;
    }

    .innertube{
    	margin: 40px;
    	margin-top: 0;
    	margin-bottom: 10px;
    	text-align: justify;
    	border-bottom: dotted 1px #782609;
    }

    .post_date { color: #177212; }

<!-- language: lang-html -->

    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Travel Company Red - Free Website Template</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <script> 
           var  BOO= 1; 
           var COIN = 1; 
           var MAP = 1;
    	   var WATCH = 1; 
    	   var HARM = 1; 
    	   var GUITAR = 1; 
    	   var incrementCount = function(){
        	clicks++;
    		}
        </script>
    <div id="maincontainer">
    <div id="topsection">
      <div id="title">Welcome to Australia</div>
    </div>
    <div id="left_column">
      <div id="menu_top"></div>
      <div class="menu"> 
      <ul>
        <li><a href="aus.html">Home</a></li>
        <li><a href="tourism.html">Tourism</a></li>
        <li><a href="educationandindustry.html">Education and Industry</a></li>
        <li><a href="culture.html">Culture</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="giftshop.html">Gift Shop</a></li>
      </ul></div>
      <div id="contact">
        <strong>QUICK CONTACT<br /></strong>
    Tel: 001-100-1000<br />
    Fax: 002-200-2000<br />
    Email: info[at]company.com</div>
    </div>
    <br>
    <br>
    <div id="right_column">
      <table>
      	<tr>
      		<td><img src="images/BOOMRANG.jpg" width="151" height="148"></td>
      		<td class="echo"><input type="text" form="esp" id="push" value="" size="2" /></td>
      		<td><img src="images/coin.jpg" width="140" height="139"></td>
      		<td class="echo"><input type="text" form="esp" id="q2" value="" size="2" /></td>
      		<td><img src="images/FLAG.jpg" width="175" height="152"></td>
      		<td class="echo"><input type="text" form="esp" id="q3" value="" size="2" /></td>
      	</tr>
      	<tr>
      		<td>
    		  <h3>Price: 10$</h3><input type="button" value="Add to Cart" onClick ="incrementCount();" q1.value="1"'/>
      		</td><td></td>
      		<td>
      			<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='COIN = 1; q2.value="1"'/>
      		</td><td></td>
      		<td>
      			<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='MAP = 1; q3.value="1"'/>
      		</td><td></td>
      	</tr>
      	<tr>
      		<td><img src="images/watch.jpg" width="139" height="150"></td>
      		<td class="echo"><input type="text" form="esp" id="q4" value="" size="2" /></td>
      		<td><img src="images/harmoniam.jpg" width="147" height="131"></td>
      		<td class="echo"><input type="text" form="esp" id="q5" value="" size="2" /></td>
      		<td><img src="images/guitar.jpg" width="189" height="139"></td>
      		<td class="echo"><input type="text" form="esp" id="q6" value="" size="2" /></td>
      	</tr>
      	<tr>
      		<td>
    		 <h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='WATCH = 1; q4.value="1"'/>
      		</td><td></td>
      		<td>
      			<h3>Price: 30$</h3><input type="button" value="Add to Cart" onclick='HARM = 1; q5.value="1"'/>
      		</td><td></td>
      		<td>
      			<h3>Price: 20$</h3><input type="button" value="Add to Cart" onclick='GUITAR = 1; q6.value="1"'/>
      		</td><td></td>
      	</tr>
      </table>
      <p>&nbsp;</p>
      <h2> TOTAL ITEMS: </h2>
      <h2> TOTAL VALUE: </h2>
    	</div>

    </div>
    <div id="bot"></div>
    </div>
    <div id="footer">Copyright © Australia Expo</div>
    </body>
    </html>

<!-- end snippet -->

I am developing a webpage and I need help adding plus one to the value on click.
and
I also need help adding the price of all the items that is collected in a section in the "number of items selected" and I want to add the total price of all the items in the "Total amount section".

Any sort of help with be much appreciated.



