Creare una pagina E-commerce con il carrello della spesa virtuale attivo

[Jessy#222]

il risultato deve essere come nell'immagine che ti ho allegato, il sito è i locale non lo provo online al momento, le mie conoscenze non sono eccellenti diciamo ho una base di tutto (html, javascript, jquery)..ti faccio vedere lo script che sono riuscita a fare.


HTML
<div id="pulsante">
<form id="f1" onSubmit="carrello()" action="xx.html" method="post">
<div id="misura">
<input id="b1" size="1" value="+" type="button" onclick="piu()"/>
<input id="c1" size="40" value="20" type="button" onclick="scrivi(this.value)"/>
</div>
</form>
</div>

questo infondo alla pagina per il totale:

<form id="f1" class="totale" onSubmit="carrello()" action="xx.html" method="post">
<input id="valore" size="10" value="" type="text"/>
<input id="b5" size="40" value="=" type="button" onclick="uguale()"/>

</form>


JS

var op1
var op2
var operando
function scrivi(numero){
document.getElementById("valore").value=document.g etElementById("valore").value + numero;
}
function piu(){
op1=document.getElementById("valore").value
document.getElementById("valore").value=""
operando=1
}
function meno(){
op1=document.getElementById("valore").value
document.getElementById("valore").value=""
operando=2
}
function uguale(){
op2=document.getElementById("valore").value

if(parseInt(operando)==1){
document.getElementById("valore").value= parseInt(op1) + parseInt(op2)
}else{
if(parseInt(operando)==2){
document.getElementById("valore").value= parseInt(op1) - parseInt(op2)
}else{
if(parseInt(operando)==3){
document.getElementById("valore").value= parseInt(op1) * parseInt(op2)
}else{
document.getElementById("valore").value= parseInt(op1) / parseInt(op2)
}
}
}
}


Il risultato che ottengo è tipo una calcolatrice..è troppo complicato per essere un carrello online..però non riesco a fare altro e vi sarei grata se mi sapreste dare qualche dritta..