AJAX form submission, submitting another form even thought using $(this) - php

Question

I have two forms on my page.
One is in the footer and is a contact page, but the other is my main form called "product-form". I am doing some validation in PHP:
foreach( $_POST as $field => $val ) {
if ($val == '') {
echo $field . "- no val <br>";
}
}
The issue is that I am seeing fields being validated that are in my footer form...
Here is my AJAX:
$('body').on('submit', '.product-form', function(e){
e.preventDefault();
var thisForm = $(this);
$.ajax({
url : '/wp-content/themes/theme/page-templates/template-parts/template-logic/send-form.php',
type : 'POST',
data : thisForm.serialize(),
before : $(".error-message").remove(),
success : function(data) {
}
});
});
How is this submitting the data from two forms?
Both forms have their tags properly closed off, with different class's too.
Have to use WordPress for this project, normally much more at home with Laravel validation so this is a bit of a throwback!
Requested form HTML:
Form I want:
<form method="post" class="product-form">
<li class="object field">
<label for="full name">Your full name <span>*</span></label>
<input class="req" autocomplete="off" type="text" name="full name" id="full name" placeholder="e.g. John Doe">
</li>
</form>
And the footer form:
<form class="footer-form small">
<li>
<button class="object button large" type="submit">Get in touch</button>
</li>
</form>

Answer 1

Please change it like this:
$( ".product-form" ).submit(function( e) {
e.preventDefault();
var thisForm = $(this);
$.ajax({
url : '/wp-content/themes/theme/page-templates/template-parts/template-logic/send-form.php',
type : 'POST',
data : thisForm.serialize(),
before : $(".error-message").remove(),
success : function(data) {
}
});
});