Una forma que se me ocurre es asignarles a cada button
el evento onclick
con una funcion general para el formulario donde se hara el submit
, asi:
<form class="form-data">
<h4>Producto N°1</h4>
<img src="producto1.jpg"/>
<p>Descripción producto </p>
<input type="text" name="sku" value="10001"/>
<button type="submit" onclick="Enviar(this)">Enviar</button>
</form>
<form class="form-data">
<h4>Producto N°2</h4>
<img src="producto2.jpg"/>
<p>Descripción producto </p>
<input type="text" name="sku" value="10002"/>
<button type="submit" onclick="Enviar(this)">Enviar</button>
</form>
<form class="form-data">
<h4>Producto N°3</h4>
<img src="producto3.jpg"/>
<p>Descripción producto </p>
<input type="text" name="sku" value="10003"/>
<button type="submit" onclick="Enviar(this)">Enviar</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
function Enviar(btn){
// Utilizamos parent para referirnos al form
var form = $(btn).parent();
$(form).submit(function(e) {
$.ajax({
url:"procesar.php",
method: "POST",
dataType: "json",
data: $(this).serialize(),
success:function(data){
}
});
});
}
});
</script>