laravel button in blade template submitted multiple times - php

Question

I have some code in a blade template which create some forms and buttons, see below
<div class="element1">
<div class="text1">
<form action="{{ route("progressSheetDynamic") }}" method="post" id= "add">
<input name="increment" value="increment" type="hidden"> </input>
<input type="hidden" name="id" value= {{$activities}} >
<button type="submit" class="styleHover styleButton" id= {{$activities}} > + </button>
</form>
{{ $count }} / {{ ($goal/5) }}
<form action="{{route("progressSheetDynamic") }}" method="post" id="delete">
<input type="hidden" name="delete" value="delete">
<input type="hidden" name="id" value= {{$activities}}>
<button type="submit" class="styleHover styleButton"> - </button>
</form>
</div>
</div>
I use #include_layouts("template file") 3 times in my view file to create the buttons 3 different times. When I click one button I want one ajax request to fire. Instead what is currently happening is that one button click shows up as there button clicks and submits the ajax request 3 different times.
Here is the relevant javascript code in the blade file
$(document).ready(function(){
$('#add').click(function(e){
e.preventDefault();
var data = $(this).serialize();
$.post('progressSheetDynamic', data).done(function(response){
console.log(data);
});
});
});
I have tried many different things like using jQuery to change the button to be disabled after one click and returning false at the end of the jQuery function.
However, in each case one click is being read as three different clicks. So the data is logged to the console three times. Is there any way to make it so that when I click one button it only registers as one click instead of 3?

Answer 1

You are triggering the ajax on the form click, try it on the button click
$(document).ready(function(){
$('.styleButton').click(function(e){
e.preventDefault();
var data = $(this).closest('form').serialize();
$.post('progressSheetDynamic', data).done(function(response){
console.log(data);
});
});
});