JQUERY ui sortable

Bonjour,

J'ai récupéré sur la bibliothèque JQUERY, avec un peu d'amélioration.

<script>
$( function() {
let dataSort={
connectWith: ".connectedSortable{{ connectId }}",
cursor:"move",
helper: "clone",
revert: true,
zIndex: 9999,
receive: function(event, ui) {
// so if > 10
if ($(this).closest('.listMembre').length<1 && $(this).children().length > 10) {
//ui.sender: will cancel the change.
//Useful in the 'receive' callback.
$(ui.sender).sortable('cancel');
}
}
};
$( ".connectedSortable{{ connectId }}" ).sortable(dataSort);

} );
</script>

Ma question est la suivante :

J'ai réussie à faire fonctionner le sortable, mais quand j'actualise je n'arrive pas à garder l'élément dans une autre <li>

<div class="contentGroupe">
<div class="groupe listMembre">
<h3>Liste des membres</h3>
<div class="ulGroupe " >
<ul class="connectedSortable{{ loop.index }}">

{% for valeur in pseudo %}
<li class="ui-state-default {{ valeur.reponse }} {{ valeur.classe|lower|replace({' ':'_', "'":'_'}) }}">
{{ valeur.pseudo|raw }}
</li>
{% endfor %}

</ul>
</div>
</div>

{% set nbPseudo=pseudo|length // 10 +1 %}
{% for i in 1..nbPseudo %}
<div class="groupe">
<h3>Groupe {{ loop.index }}</h3>
<div class="ulGroupe">
<ul class="connectedSortable{{ connectId }}">
</ul>
</div>
</div>
{% endfor %}
</div>

Pour être plus claire, je créai un <ul> avec des <li>"cette colonne liste des participant" dans ce bloc je récupère tous les pseudo.

Une fois récupérée je créai des groupes 1, 2, ...

Dans le premier <ul>, <li> là je récupère les pseudo je déplace les joueurs dans un groupe 1, 2 et ,..., jusqu'à là tous fonctionne.

Sauf que quand j'actualise la page les personnes que j'ai déplacés dans le groupe 1,2,..., tous revient dans le <ul>, <li> d'origine.
Je block je suis sur que sur leurs page il y a la solution mais moi et l'anglais fais 2.

https://api.jqueryui.com/sortable/#option-appendTo

Merci d'avance pour votre aide. A oui {% %} c'est du moteur Template twig.

Ps: je vous joins également le php qui va avec.

if((int)$post['id']<=0){
exit('id incorrect');
}
$event=$this->db->query('SELECT titre FROM evenements WHERE id=?', [(int)$post['id']])->fetch();
if(!Tools::displayIfPropertyExist($event, 'titre')){
exit("l'évenement existe pas !!!");
}
$titre=$event->titre;
$participants = $this->db->query("SELECT r.*, g.classe FROM evenements_reponse r INNER JOIN guilde g ON g.pseudo = r.pseudo WHERE r.idEvenement=?", [(int)$post['id']])->fetchAll();

if(empty($participants) or !is_array($participants)){
exit('Impossible de récupérer les informations de la base de données.');
}

$events= array();
$eventsNons= array();
foreach ($participants as $key=>$participant){
$participants_boucles = json_decode($participant->reponse, true);
foreach($participants_boucles as $date_event => $reponse) {
if(in_array(strtolower($reponse), array('oui', 'x'))){
if(array('oui')){
echo '<style>.Oui{color:#FFFFFF}</style>';
}
if(array('x')){
echo '<style>.X{color:#000000}</style>';
}
$events[$date_event][$key]['pseudo'] = $participant->pseudo;
$events[$date_event][$key]['classe'] = $participant->classe;
$events[$date_event][$key]['reponse'] = $reponse;
}
if(in_array(strtolower($reponse), array('non'))){
$eventsNons[$date_event][$key]['pseudos'] = $participant->pseudo;
}
}
}
if(Tools::isDeveloper()){
echo "<span style='color:red'>Page: reponse" . __FILE__ . "</span> | <span style='color:yellowgreen'>Class: " . __CLASS__ . "</span> | <span style='color:hotpink'>Function: " . __FUNCTION__ . "</span> | <span style='color:cyan'>Ligne: " . __LINE__ . " </span><pre style='background:white;color:black;'>";
print_r($reponse);
echo "</pre><hr>";
}

return ['events' => $events, 'eventsNons' => $eventsNons, 'titre'=>$titre, 'participants'=>$participants];
}