Create Array in JavaScript

I am trying to create an Array using the following method, but so far I only managed to get the data one by one. What I actually wish to accomplish is to store an array with all the data so I can store it in a database using PHP.

So far, my problem is that I can't seem to manage to create a simple array with JS, when I tried using "push" it would return empty arrays.

Is anyone able to help me?

Sortable.create(simpleList, {
  onUpdate: function( /**Event*/ evt) {
    saveUnitsPositions();
  },
});

function saveUnitsPositions() {
  const GETPOSITION = document.querySelectorAll("#simpleList li");
  var positions = [];
  for (var i = 0; i < GETPOSITION.length; i++) {
    positions = GETPOSITION[i].getAttribute('data-value');
    console.log(positions);
  }
}

<script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />


<ul id="simpleList" class="list-group">
  <li class="list-group-item course-unit" data-value="26321">
    Etude #1
  </li>
  <li class="list-group-item course-unit" data-value="26322">
    Etude #2
  </li>
  <li class="list-group-item course-unit disabled" data-value="Backing Tracks">
    Backing Tracks
  </li>
  <li class="list-group-item course-unit" data-value="26326">
    Backing track Fusion (118 bpm)
  </li>
  <li class="list-group-item course-unit" data-value="26327">
    Backing track Samba (90 bpm)
  </li>
  <li class="list-group-item course-unit disabled" data-value="Apostilas">
    Apostilas
  </li>
  <li class="list-group-item course-unit" data-value="26615" style="transform: translateZ(0px);">
    Etudes
  </li>
  <li class="list-group-item course-unit" data-value="26332">
    Tríades Mutantes – Apostila Completa
  </li>

</ul>

Solution

If you try without the Sortable it works with the push method. Maybe the problem is with the Sortable. And it's correct to use the push method and it should work.

EDIT: I tried again, and it works with the Sortable, when you update some position, it fill the array.

Sortable.create(simpleList, {
  onUpdate: function( /**Event*/ evt) {
    saveUnitsPositions();
  },
});

function saveUnitsPositions() {
  const GETPOSITION = document.querySelectorAll("#simpleList li");
  var positions = [];
  for (var i = 0; i < GETPOSITION.length; i++) {
    positions.push(GETPOSITION[i].getAttribute('data-value')); // use push here
    console.log(positions);
  }
}

<DOCTYPE html>
<html>
<head>
<script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<ul id="simpleList" class="list-group">
  <li class="list-group-item course-unit" data-value="26321">
    Etude #1
  </li>
  <li class="list-group-item course-unit" data-value="26322">
    Etude #2
  </li>
  <li class="list-group-item course-unit disabled" data-value="Backing Tracks">
    Backing Tracks
  </li>
  <li class="list-group-item course-unit" data-value="26326">
    Backing track Fusion (118 bpm)
  </li>
  <li class="list-group-item course-unit" data-value="26327">
    Backing track Samba (90 bpm)
  </li>
  <li class="list-group-item course-unit disabled" data-value="Apostilas">
    Apostilas
  </li>
  <li class="list-group-item course-unit" data-value="26615" style="transform: translateZ(0px);">
    Etudes
  </li>
  <li class="list-group-item course-unit" data-value="26332">
    Tríades Mutantes – Apostila Completa
  </li>

</ul>
</body>
</html>