Javascript 如何使用JQUERY可排序列表更新数据库上的信息？

我刚开始使用jQueryUI，遇到了一个问题

我通过一个PHP函数（称为4次）打印了5个列表，我只是让它们在它们之间可以排序，问题是，我希望能够在它们之间拖动元素，当我拖动它们时，我需要更新字段“week”，它对应于元素将在哪个列表中

现在，我尝试简单地将“week”更新为表的id（方便地编号为1到5），但我知道没有办法在列表中检索元素的id，以便更新正确元素的正确字段

这是我的一些代码片段：

HTML代码

<div class="row">
</div>
<div class="row">
    <div class="input-field center col s2" style="margin-left: 5%; text-align: center">
        <ul class="collapsible">
          <li id = "1">
            <div class="collapsible-header">
              <i class="material-icons">update</i>
              Semana 01
              <span class="badge"><?php count_week($conn,$id,1); ?></span></div>
              <?php select_week_no_token($conn,$id,1); ?>
          </li>
        </ul>
    </div>
    <div class="input-field center col s2" style="margin-left: 35px">
        <ul class="collapsible">
          <li  id = "2">
            <div class="collapsible-header">
              <i class="material-icons">cloud</i>
              Semana 02
              <span class="badge"><?php count_week($conn,$id,2); ?></span></div>
              <?php select_week_no_token($conn,$id,2); ?>
          </li>
        </ul>
    </div>
</div>

function select_week_no_token($conn,$id,$week)
{
    $query = "SELECT id,task,status FROM onboarding_checklist_week WHERE id_project='$id' AND week = $week";
    $results = mysqli_query($conn, $query);
    while ($row = mysqli_fetch_array($results, MYSQLI_ASSOC)) {
        if($row['status'] == 1)
        {
            echo '<li><div style="background-color: #a7ffeb; padding:0" class="collapsible-body"><p>'.$row['task'].'</p></div></li>';
        }
        else
        {
            echo '<li><div style="background-color: #ffcdd2; padding:0" class="collapsible-body"><p>'.$row['task'].'</p></div></li>';
        }
    }
}

$(document).ready(function() {

    $('#1').sortable({
        cancel: ".collapsible-header",
        connectWith: '#2, #3, #4, #5',
        receive: function (event,ui) {
            var id = $(ui.item).attr('id');
            var week = '1';
            $.ajax({
                url: 'changeEvents.ajax.php',
                type: 'POST',
                data: {
                    'id' : id,
                    'week': week
                }
            });
        }
    });

    $('#2').sortable({
        cancel: ".collapsible-header",
        connectWith: '#1, #3, #4, #5',
        receive: function (event,ui) {
            var id = $(ui.item).attr('id');
            var week = '2';
            $.ajax({
                url: 'changeEvents.ajax.php',
                type: 'POST',
                data: {
                    'id' : id,
                    'week': week
                }
            });
        }
    });

    $('#3').sortable({
        cancel: ".collapsible-header",
        connectWith: '#2, #1, #4, #5',
        receive: function (event,ui) {
            var id = $(ui.item).attr('id');
            var week = '3';
            $.ajax({
                url: 'changeEvents.ajax.php',
                type: 'POST',
                data: {
                    'id' : id,
                    'week': week
                }
            });
        }
    });

    $('#4').sortable({
        cancel: ".collapsible-header",
        connectWith: '#2, #3, #1, #5',
        receive: function (event,ui) {
            var id = $(ui.item).attr('id');
            var week = '4';
            $.ajax({
                url: 'changeEvents.ajax.php',
                type: 'POST',
                data: {
                    'id' : id,
                    'week': week
                }
            });
        }
    });

    $('#5').sortable({
        cancel: ".collapsible-header",
        connectWith: '#2, #3, #4, #1',
        receive: function (event,ui) {
            var id = $(ui.item).attr('id');
            var week = '5';
            $.ajax({
                url: 'changeEvents.ajax.php',
                type: 'POST',
                data: {
                    'id' : id,
                    'week': week
                }
            });
        }
    });

});

这是我正在导入的可选javascript文件

基本上，到目前为止，我可以使列表可排序，但根本无法更新它，它甚至不调用函数，即使调用了，我确信也无法更新，因为我的数据库中没有与我正在拖动的元素对应的“id”字段

有没有办法，简单还是困难，来解决这个问题？代码有什么问题？即使我必须使用另一种编码语言或其他东西，我如何检索这样的id

---

抱歉，我是个新手。

好的，没有答案，但是jQuery在不久的将来会过时，你可能想学习Vue.js或React，它们更容易编码。我使用jQuery是因为我找到了解决方案，如果你能在Vue.js或React中提供某种解决方案，我也可以使用，没问题！我已经向你展示了，或者为你指出了正确的方向，选择权在你。正如我所说，Vues.js或React.js是您想要的方式。需要学习，但值得！好的，不是答案，但是jQuery在不久的将来将会过时，你可能想学习Vue.js或React，它们更容易编码。我使用jQuery是因为它是我找到的解决方案，如果你能在Vue.js中提供某种解决方案或React，我也可以使用，没问题！我已经向你展示了，或者为你指出了正确的方向，选择权在你。正如我所说，Vues.js或React.js是您想要的方式。需要学习，但值得！