Récupérer des données dans un div

Bonjour,
Je suis entrain de développer un site web.
j'ai un div et je veux qu'à chaque fois je clique sur le bouton"send data" il y'aura récupération du libellé de produit(dans le div) ainsi qu'ajout d''une zone de texte pour saisir la quantité.

Mon code marche bien mais seulement pour la récupération d'une seule donnée, et chaque fois écrase l'ancienne et la remplace par la nouvelle.

Donc,mon problème est comment je peux récupérer plusieurs valeurs dans une div et pour chaque valeur récupérée on lui associe une zone de texte.
voici mon code:

<script>
$(document).ready(function(){

	$('.formsubmit').click(function(){
		id=this.name;
		var result=id.split('|');
		
		response=$("#responses").val();
	
		response+=result[1]+'\n';

		$("#responses").html(response);
			
	});

});</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<?php

require 'Categorie.php';

require 'Produit.php';
$pa=new Produit($base);
$ca=$pa->findproduit($_GET["id"]);


?>
 <table>
<?php

for($i = 0;count($ca) > $i; $i++) {
?>
<tr>
    <label id = "responses" style = "width: 200px; height: 100px; resize: none;" name="responses[]"></label>
    <br/>
    Quantité:<input type="text" value=""/>
</tr>

<?php
}
 
?>
	
</table> <?php
 
 foreach($ca as $pers)
 {
     ?>
	 <form id="<?php  echo  $pers['Id_produit'] ; ?>">
	 <input type="hidden" value="<?php  echo  $pers['Id_produit'] ; ?>" id="ids" name="ids[]">
<div class="image"> 	<label id="fname" name="fnames[]"><?php  echo $pers['libelle_produit'] ; ?> </label><img width="200" height="200" src="<?php  echo 'Images/' . $pers["tof"];?>"></div>
<div class="caption">  	Nombre de pièces par kilo :<label id = "surname" name="surnames[]" ><?php  echo $pers['Nb_pieces'] ; ?> </label> </div><br>      <br>
<input type="button" class="formsubmit" name="<?php  echo  $pers['Id_produit'].'|'.$pers['libelle_produit']; ?>" value="Send Data"/><br>
</form>	

<?php
 }
 ?>
 <?php
 
	?>

Merci d'avance