Enviar valores por metodo GET con ajax

[Andreselah]

Hola amigos tengo un inconveniente con un proyecto que estoy desarrollando necesito de su ayuda... explico.

Estoy desarrollando un carrito de compras con php, ajax tengo el siguinete problema estoy trayendo la info de mis productos de una base de datos lo cual lo hago con un while asi:

Código PHP:

   if($número_filas==""){ 
           echo 'No hay Registros<br><br>'; 
       }else{ 
                
                   echo "<div class='rows'>"; 
        while ($row = mysql_fetch_array($consulta)){  
             
            echo " 
                <div class='col-md-4 productos'> 
                    <img src='$row[foto]' class='img-productos'> 
                    <label><h4>$row[nombre]<br><small>Precio:</small> S/. $row[preciopubli]</h4><h4><small>Cantidad:<input id='cantidad' class='cantidad' value='".$row[cantidad]."' type='number' name='cantidad'/></small></h4></label><br> 
                    <div> 
                    <button value='".$row[id]."'  class='btn_detalle btn btn-info' data-toggle='modal' data-target='.bs-example-modal-md'>Detalles</button> 
                    <input class='id' id='id' value='".$row[id]."'  type='hidden'/> 
                    <button class='btn_comprar btn btn-danger'>Comprar</button> 
                    </div> 
 
                </div> 
            "; 
 
        } 
        echo "</div>"; 
    }  
   

como se nota aquí tengo dos inputs el uno contiene el 'id' de mi producto y el otro la 'cantidad' ahora estoy tratando de enviarlos a otra página por el metodo get usando el siguiente script:

Código:

$(document).ready(compra)
function compra (){
	$('.btn_comprar').click(enviar)
	$('.nota').load("php/compra.php");
}
function enviar (){
	var dato1= $('.id').val();
	var dato2= $('.cantidad').val();
	var cadena="id="+ dato1 + "&cantidad="+ dato2;
	$('.nota').load("php/compra.php?"+cadena);	

}

el problema que tengo es que al hacer click en el botón comprar de cualquier producto me envía los datos del primer producto y no del producto que selecciono , siempre escoge los valores del primer producto que sustraigo de la base de datos he intentado de todo sin resultados, alguien sabe como hacerlo se los agradecería grandemente ...

[gammafp]

Esto es jquery no deberia ir acá, mejor metelo en la sección de jQuery