Дифференцировать множественную форму на AJAX

Question

У меня есть страница php с несколькими формами внутри.

<form id="form_<?php echo $rowProduct['Product_ID'];?>">
    <a id="wh_<?php echo $rowProduct['Product_ID'];?>"><i class="fal fa-heart"></i></a>
    <input type="hidden" name="PID_<?php echo $rowProduct['Product_ID'];?>" value="<?php echo $rowProduct['Product_ID'];?>">
    <input type="hidden" name="mail_<?php echo $rowProduct['Product_ID'];?>" value="<?php echo $rowProduct['Mail'];?>">

Эти формы генерируются из циклического прохождения всех данных в MySQL.У каждой формы и ввода есть свой уникальный идентификатор по Product_ID.

Ниже приведен скрипт ajax для отправки данных в базу данных.

<script>
    $('[id^=wh_]').click(function(e) {
        $.ajax({
            url: 'submit.php',
            type: 'POST',
            data: $("[id^=form_]").serialize(),
            success: function(data) {
                alert('Success add item');
            }
        });
        e.preventDefault();
    });
</script>

В настоящее время этот код успешно вставляет данные в MySql, но передает данные.всегда быть последней формой, независимо от того, какая кнопка отправки нажата.Я использую AJAX для отправки этих форм, чтобы получить форму, не обновляя страницу php.

Большое спасибо за любую помощь.

Answer 1

Попробуйте изменить это data: $("[id^=form_]").serialize(), на

data: $(this).closest('form').serialize()