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:
$(document).ready(function() {
function Enviar(btn) {
// Utilizamos parent para referirnos al form
var form = $(btn).parent();
$(form).submit(function(e) {
e.preventDefault();
$.ajax({
url: "procesar.php",
method: "POST",
dataType: "json",
data: $(this).serialize(),
success: function(data) {
}
});
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>