Sending Data to a Server with Jquery (Ajax) and PHP and GET the Data

i am trying to get a Website done. The Problem is: I dont know how i can send the Data to the Webserver and save the data at is place. What i have is some ul´s where i can drag and drop li´s with ids (user_0 to user_100). What I want is to click on the submit button and send the Data as it is to the server and save the changes but that is the point where i am stuck. Maybe you can help me out:

  * {
            font-family: 'Fredoka', sans-serif;
            font-family: 'Gothic A1', sans-serif;
            font-family: 'Lato', sans-serif;
            font-family: 'Nanum Gothic', sans-serif;
            font-family: 'Poppins', sans-serif;
        }


        #sortable1, #sortable2 {
          border: 1px solid #eee;
          width: 400px;
          min-height: 20px;
          list-style-type: none;
          margin: 0;
          padding: 5px 0 0 0;
          float: left;
          margin-right: 10px;
        }
        #sortable1 li, #sortable2 li {
          margin: 0 5px 5px 5px;
          padding: 5px;
          font-size: 1.2em;
         }
        .unsortiert {
            float: left;
            margin-right: 2%;
            padding: 20px;
            background: #eee;
            }
        .header {
            text-align: center;
            font-weight: bold;
        }
        .ui-state-default {
            padding:10px;
            background:#bada55;
            border:1px solid;
            display:inline-block;
            margin:25px
        }

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300&family=Gothic+A1:wght@200;500&family=Lato:wght@300&family=Nanum+Gothic&family=Poppins:wght@200&display=swap" rel="stylesheet">
    <title>Test</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<style>
      
        </style>

        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
        <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
        <script>
          $( function() {
    $( "#sortable1, #sortable2, tbody").sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  } );
  </script>

       
<?php

$sequenz = array(
    array('User' => '1','Name' => 'Test1','farbe' => 'grün'),
    array('User' => '2','Name' => 'Test2','farbe' => 'grün'),
    array('User' => '3','Name' => 'Test3','farbe' => 'grün'),
    array('User' => '4','Name' => 'Test4','farbe' => 'grün'),
    array('User' => '5','Name' => 'Test5','farbe' => 'grün'),
    array('User' => '6','Name' => 'Test6','farbe' => 'grün'),
);

?>
    <?php
echo '<ul id="sortable1" class="connectedSortable">';
    foreach ($sequenz as $result) {
        echo '<li id="user1" class="ui-state-default">' . $result['Name'];
    }
echo '</ul>';
?>


<?php
echo '<ul id="sortable1" class="connectedSortable">'. "Tabelle2";
echo '</ul>';
?>




<?php
echo '<ul id="sortable1" class="connectedSortable">'. "Tabelle2";
echo '</ul>';
?>

    <button class="submit">Hier klicken zum Speichern in der Datenbank</button>

<script>
$('#sortable1 li').attr('id', function() {
  return 'name' + $(this).index();
});
</script>


<script>


</script>



</body>
</html>