Getting the values from dynamically created input(s) from a table

I have a table

   <form id="project-form">
                    <table id="project-table" class="table table-striped table-inverse table-responsive">
                        <caption>Projects</caption>
                        <thead class="thead-inverse">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Project name</th>
                                <th scope="col">Description</th>
                                <th scope="col">Estimated time (min)</th>
                                <th scope="col">Actual time (min)</th>
                                <th scope="col">Add task</th>
                                <th scope="col">Delete project</th>
                            </tr>
                        </thead>
                        <tbody id="project-body">


                        </tbody>
                    </table>
                </form>

This table is filled with data from an AJAX GET request

function getProjects() {
  $.ajax({
    method: 'GET',
    dataType: 'json',
    data: {
      functionToCall: 'project',
    },
    url: 'http://localhost/WBS/php/api/requests/get.php',
    success: (response) => {
      $.each(response, function () {
        $.each(this, function (index, value) {
          $('#project-body').append(
            `
            <tr>
                <td>
                  <input class="form-control" type="hidden" name="projectid" id="projectid"  value="${value.projectid}">
                </td>
                <td>
                  <input class="form-control" type="text" name="projectName" id="projectName" value="${value.title}">
                </td>
                <td>
                  <input class="form-control" type="text" name="description" id="description"  value="${value.description}">
                </td>
                <td>
                  <input class="form-control" type="text" name="estimatedTime" id="estimatedTime"  value="${value.Estimated_time}">
                </td>
                <td>
                  <input class="form-control" type="text" name="actualTime" id="actualTime"  value="${value.Actual_time}">
                </td>
                <td>
                  <a id="addTask" class="btn btn-info" href="Overview.html?id=${value.projectid}" role="button">
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
                  </a>
                </td>
                <td>
                  <button type="button" id="deleteProject" name="deleteProject" class="btn btn-danger">
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
                  </button>
                </td>
            </tr>
  
            `
          );
        });
      });
    },
    error: () => {
      console.error('Something went wrong with the getProjects function');
    },
  });
}

There is also the option to dynamically add a new row of inputs to the table

function addProject() {
  event.preventDefault();

  $('#project-body').append(

    `
        <tr>
            <td>
              <input class="form-control" type="hidden" name="projectid" id="projectid" >
            </td>
            <td>
              <input class="form-control" type="text" name="projectName" id="projectName">
            </td>
            <td>
              <input class="form-control" type="text" name="description" id="description">
            </td>
            <td>
              <input class="form-control" type="text" name="estimatedTime" id="estimatedTime">
            </td>
            <td>
              <input class="form-control" type="text" name="actualTime" id="actualTime">
            </td>
            <td>
              <a id="addTask" class="btn btn-info" href="Overview.php" role="button">
                <i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
              </a>
            </td>
            <td>
              <button type="button" id="deleteProject" name="deleteProject" class="btn btn-danger">
                <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
              </button>
            </td>
        </tr>
  
        `
  );
}

I submit all of my data on this button

<button id="saveProjects" form="project-form" class="btn btn-info" type="button"><i class="fa fa-angle-right" aria-hidden="true"></i> Save changes</button>

In the document ready I handle all of my onclick events

$(document).ready(() => {

  $('#saveProjects').on('click', () => {
    uploadProjects();
  });

  $('#addProject').on('click', () => {
    addProject();
  });
});

On my PHP side I have a class that handles all of my POST requests, inside of this class is a function that will handle the uploading of new projects

    public function uploadProject()
    {
        try {
            $title = $_POST["projectName"];
            $description = $_POST["description"];
            $estimatedTime = $_POST["estimatedTime"];
            $actualTime = $_POST["actualTime"];

            $stm = $this->pdo->getCon();

            $PDOStatement = $stm->prepare("INSERT INTO projects (title,description,Estimated_time,Actual_time) VALUES(:title,:description,:Estimated_time,:Actual_time)");

            $PDOStatement->bindParam(':title', $title, PDO::PARAM_STR);
            $PDOStatement->bindParam(':description', $description, PDO::PARAM_STR);
            $PDOStatement->bindParam(':Estimated_time', $estimatedTime, PDO::PARAM_STR);
            $PDOStatement->bindParam(':Actual_time', $actualTime, PDO::PARAM_STR);

            $PDOStatement->execute();

            header('HTTP/1.1 200 OK');
        } catch (Exception  $th) {
            header("HTTP/1.0 404 Not Found");
            throw $th->getMessage();
        }
    }

Now debugging my PHP code, and all the data I receive in the POST array will always correspond to the first row in the table, for example:

Let's say i have an existing row inside of my table with the values of : Project name = Hello | Description = World.

I click on the add project button and a new row is added to the table, I fill in the inputs inside of the row with something like this : Project name = Second table row | Description = Second description.

At the back-end I will always receive the values of Hello and World and not the values of the newest added row inside of the table.

I googled around a bit and only saw examples on how to get the value of a SINGLE dynamically added input and not a new row.

I think you can rename your inputs like:

 name="projectid[]"

Then PHP will receive an array of those values:

$total = count($_POST["projectid"]);
for ($i = 0; $i < $total; $i++) {
    $title = $_POST["projectName"][$i];
    $description = $_POST["description"][$i];
    $estimatedTime = $_POST["estimatedTime"][$i];
    $actualTime = $_POST["actualTime"][$i];

    // Your INSERT query is performed here
}