Dynamically generated form does not recognise different rows - php

Question

I'm building a dynamically generated table where every row is a form with some inputs and selects and has its own submit.
Here is my code so far:
<script>
$(function () {
$('form').on('submit', function (e) {
var princ = $('#principal').val();
window.princ = princ;
e.preventDefault();
$.ajax({
url: 'post.php',
method: 'GET',
data: {"princ":princ},
success: function (response) {
alert("success");
} }); }); });
</script>
<table id="assets_table">
<thead style=" cursor: pointer;">
<tr style="text-align: left; color: #fff;">
<th>Lender </th>
<th>Principal </th>
<th>Int. % </th>
<th>Term (mo.) </th>
<th>Collateral </th>
<th></th>
</tr>
</thead>
<tbody>
<?php
$competitions_id = $uscom['id'];
$users_query = mysqli_query($con, "SELECT * FROM competitions WHERE competition='$compe'");
$users_query_r = mysqli_fetch_array($users_query);
foreach($users_query as $users_query_r) {
$usn = $users_query_r['Name'];
$usn_query = mysqli_query($con, "SELECT * FROM users WHERE username='$usn'");
$usn_query_r = mysqli_fetch_array($usn_query);
?>
<form>
<tr>
<td> <img src="<?= $punch_query_r['profile_pic'] ?>" alt="user"> <?= $users_query_r['Name'] ?></td>
<td><input id="principal" type="text" value="0" ></td>
<td><input id="rate" type="text" value="0" ></td>
<td><input id="term" class = "term_input" type="text" value="0" ></td>
<td><input id="collateral" type="text" value="0">
<select id="colselect" >
<option selected disabled>Select asset</option>
</select></td>
<td> <input type="submit"></td>
</tr>
<?php
} ?>
</tbody>
</table>
</form>
However I cannot make it work properly because when I click on submit it does not really submit the corresponding row's form but the first one that was submitted.
I've also tried rewritting variables with input paste keyup but it does not solve the problem either because it just gets the last input whch was filled regardless of the row.
Any idea on how to solve it? Many thanks in advance.