从表中获取动态创建的输入中的值

我有桌子

   <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>

该表填充了来自AJAX GET请求的数据

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');
    },
  });
}

还可以选择向表中动态添加新的输入行

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>

        `
  );
}

我在此按钮上提交了所有数据

<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>

在准备好文档中，我将处理所有onclick事件

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

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

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

在我的PHP端，我有一个处理所有POST请求的类，该类内部是一个函数，该函数将处理新项目的上载

    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();
        }
    }

现在调试我的PHP代码，并且我在POST数组中收到的所有数据将始终对应于表的第一行，例如：

Let's say i have a 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.

我在Google上搜索了一下，只看到了有关如何动态添加输入而不是新行的值的示例。