Items swapping order on the Visjs timeline

Question

When I zoom in to enlarge the canvas and then unzoom, the items swap places.

I recorded a gif to better demonstrate what I'm talking about: Zoom in adn Zoom out

This is the code I have to create the groups and items:

groups.add({
    id: <?php echo $i; ?>,
    content: "<div id='<?php echo str_replace(' ', '',$valor['nome_social']); ?>' title='Adicionar booking' class='row justify-content-center cursor'><img src='<?php if($valor['img'] !=''){echo $valor['img'];}else{echo '../img/avatar.png';} ?>' style='width: 100px; height: 80px; border-radius: 100%;'><img src='../img/mais.png' style='width: 42px; position:absolute; right: 10px'><div class='row justify-content-center'><?php echo $valor['nome_social']; ?></div></div>",
    order: <?php echo $i; ?>,
    <?php if($valor['situacao'] == '0'){
       echo "style: 'background-color: rgba(255, 0, 0, 0.2)',
        className: 'red'"; 
       } ?>
  });

items.add({
    group: <?php echo $i; ?>,
    start: start,
    end: end,
    type: "range",
    content: "<div <?php $word = array_merge(range('a', 'z'), range('A', 'Z')); shuffle($word); $aleatorio = substr(implode($word), 0, 20); ?> id='span_<?php echo $aleatorio; ?>'><?php if($confirmacao[$x] == '0'){echo '<img src=\'../img/nao_confirmado.png\' style=\'width: 17px;\'>';}else{echo '<img src=\'../img/confirmado.png\' style=\'width: 17px;\'>';}if($anotacoes[$x] ==''){echo '<br>';} ?><?php if($anotacoes[$x] !=''){echo '<img src=\'../img/anotacoes.png\' class=\'ms-2\' style=\'width: 17px;\'><br>';} ;echo $itens[$x].'<br>'.str_replace('||', ', ', $softwares[$x]); ?></div>",
    className: '<?php echo $itens[$x].' '.$aleatorio;?>',
  });

Answer 1

In case someone is also suffering from this someday, here's the way I managed to solve it:

After doing a lot of research on this question and similar things to see if I could find an answer, I found this function that checks the ID of items and puts them in order on the timeline. That is, I had to add ID to my items.

groups.add({
    id: <?php echo $i; ?>,
    content: "<div id='<?php echo str_replace(' ', '',$valor['nome_social']); ?>' title='Adicionar booking' class='row justify-content-center cursor'><img src='<?php if($valor['img'] !=''){echo $valor['img'];}else{echo '../img/avatar.png';} ?>' style='width: 100px; height: 80px; border-radius: 100%;'><img src='../img/mais.png' style='width: 42px; position:absolute; right: 10px'><div class='row justify-content-center'><?php echo $valor['nome_social']; ?></div></div>",
    order: <?php echo $i; ?>,
    <?php if($valor['situacao'] == '0'){
       echo "style: 'background-color: rgba(255, 0, 0, 0.2)',
        className: 'red'"; 
       } ?>
  });

items.add({
    group: <?php echo $i; ?>,
    id: <?php echo $valor_id; ?>,
    start: start,
    end: end,
    type: "range",
    content: "<div <?php $word = array_merge(range('a', 'z'), range('A', 'Z')); shuffle($word); $aleatorio = substr(implode($word), 0, 20); ?> id='span_<?php echo $aleatorio; ?>' style='position: relative; z-index: 1'><?php if($confirmacao[$x] == '0'){echo '<img src=\'../img/nao_confirmado.png\' style=\'width: 17px;\'>';}else{echo '<img src=\'../img/confirmado.png\' style=\'width: 17px;\'>';}if($anotacoes[$x] ==''){echo '<br>';} ?><?php if($anotacoes[$x] !=''){echo '<img src=\'../img/anotacoes.png\' class=\'ms-2\' style=\'width: 17px;\'><br>';} ;echo $itens[$x].'<br>'.str_replace('||', ', ', $softwares[$x]); ?></div>",
    className: '<?php echo $itens[$x].' '.$aleatorio;?>',
  });

var options = { 
  order: function(a ,b){
            return a.id-b.id;
    },
}