One ajax for multiple form with same input fields - html

Question

I have a table with large number of rows, something like this:
Actually in every row, in "Details" column, there is a form with two inputs, the first input (which is hidden) is corresponding Music ID and the second input is "Click To View Details" which submit the forms.
So, We have 1000 forms, with the same action but different hidden inputs.
I want to write ajax for these forms, It's obvious that I can't write 1000 ajax event for every form, so what can I do? Can I write ajax by class? not ID?
(As you know these 1000 forms should have different and unique IDs but they can have same class)
I tried to make unique form, and pass desired inputs for every row to that form and then write one ajax for that form ,However, It causes lot's of complexity and not a good option for me.
Here is an example of my form with 4 row:
https://jsfiddle.net/k930haxr/
<table>
<thead>
<th>Music ID</th>
<th>Music Name</th>
<th>Music Details</th>
</thead>
<tr>
<td>1</td>
<td>Song 1</td>
<td><form action="detail.php">
<input type="hidden" name="musicid" value="1">
<input type="submit" value="Music details">
</form></td>
</tr>
<tr>
<td>2</td>
<td>Song 2</td>
<td><form action="detail.php">
<input type="hidden" name="musicid" value="2">
<input type="submit" value="Music details">
</form></td>
</tr>
<tr>
<td>3</td>
<td>Song 3</td>
<td><form action="detail.php">
<input type="hidden" name="musicid" value="3">
<input type="submit" value="Music details">
</form></td>
</tr>
<tr>
<td>4</td>
<td>Song 4</td>
<td><form action="detail.php">
<input type="hidden" name="musicid" value="4">
<input type="submit" value="Music details">
</form></td>
</tr>
</table>

Answer 1

Ideas are pretty simple:
Add a click event to your forms like this:
$("form").submit(function (e) {
// Your code
});
Get forms' input values by using form.elements[0].value where form is const form = e.target;
Finally call your ajax from that event in your way.
Have a look at the snippet below:
$("form").submit(function (e) {
e.preventDefault();
const form = e.target;
const val1 = form.elements[0].value;
const val2 = form.elements[1].value;
// console.log(val1, val2);
const data = {
val1: val1,
val2: val2
};
console.log(data);
$.ajax({
url: '', // your url
method: 'POST',
data: { fields: data },
success: () => {
console.log("Success");
}
});
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<table>
<thead>
<th>Music ID</th>
<th>Music Name</th>
<th>Music Details</th>
</thead>
<tr>
<td>1</td>
<td>Song 1</td>
<td>
<form action="detail.php">
<input type="hidden" name="musicid" value="1">
<input type="submit" value="Music details">
</form>
</td>
</tr>
<tr>
<td>2</td>
<td>Song 2</td>
<td>
<form action="detail.php">
<input type="hidden" name="musicid" value="2">
<input type="submit" value="Music details">
</form>
</td>
</tr>
<tr>
<td>3</td>
<td>Song 3</td>
<td>
<form action="detail.php">
<input type="hidden" name="musicid" value="3">
<input type="submit" value="Music details">
</form>
</td>
</tr>
<tr>
<td>4</td>
<td>Song 4</td>
<td>
<form action="detail.php">
<input type="hidden" name="musicid" value="4">
<input type="submit" value="Music details">
</form>
</td>
</tr>
</table>