Stai sbagliando approccio.
Tieni sempre ben presente che gli id sono, e devono essere, univoci.
In altre parole, non puoi avere più id con lo stesso valore sullo stesso documento.
Ti consiglio di utilizzare delle classi.
Puoi usare il metodo querySelector() per cercare gli elementi interessati da cui prelevare, e su cui scrivere, il valore.
Passando la keyword this alla funzione, puoi impostare una ricerca relativamente al pulsante che richiama tale funzione.
Un esempio pratico:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
/* un po' di style */
.contenuto{width:200px;height:80px;border:1px solid Blue;}
form{margin-bottom:20px}
</style>
<script type="text/javascript">
function aggiorna(me){ // "me" fa riferimento al pulsante chiamante
var form = me.parentNode; // L'elemento form in cui è contenuto "me"
var inputProdotto = form.querySelector(".prodotto"); // Cerco l'elemento con classe "prodotto"
var divContenuto = form.querySelector(".contenuto"); // Cerco l'elemento con classe "contenuto"
divContenuto.innerHTML = inputProdotto.value; // Metto il valore dentro il div
}
</script>
</head>
<body>
<form name="form" id="peppa" action="add.php" method="post">
<input type="hidden" class="prodotto" value="peppa">
<div class="contenuto"></div>
<input type="button" value="Aggiungi al carrello" onclick="aggiorna(this)">
<input type="submit" value="invia">
</form>
<form name="form" class="peppe" action="add.php" method="post">
<input type="hidden" class="prodotto" value="peppe">
<div class="contenuto"></div>
<input type="button" value="Aggiungi al carrello" onclick="aggiorna(this)">
<input type="submit" value="invia">
</form>
</body>
</html>
Prego!