You can only drag an HTML list once

Question

I am completely new to coding, so please bear with me if my questions are stupid (and write any answer as code, as I will not get it otherwise). I work on the Qualtrics survey page, where I have two additional answers - each answer is a list of items. I am trying to shuffle the lists so that each participant views them in a different order. I got these codes from the Internet.

My HTML lists are as follows:

<div id="enriched">
    <div class="list_item">lots of sunshine</div>
    <div class="list_item">gorgeous beaches and coral reefs</div>
    <div class="list_item">ultra-modern hotel</div>
    <div class="list_item">very cold water</div>
    <div class="list_item">very strong winds</div>
    <div class="list_item">no nightlife</div>
</div>

While my javascript code is this:

var list = document.getElementById("enriched");
function shuffleNodes() {
    var nodes = list.children, i = 0;
    nodes = Array.prototype.sort.call(nodes);
    while(i < nodes.length) {
       list.appendChild(nodes[i]);
       ++i;
    }
}
shuffleNodes();

However, it only shuffles the list once from the original version. After that, each next participant simply sees this version without further shuffling. Then I need to somehow make it work for both lists. I'm a little shy.

, .

Answer 1

, nodes = Array.prototype.sort.call(nodes); - . , .

, () JavaScript? .

Answer 2

random_list:

var random_list = [];

for ( i = 0; i < nodes.length; i ++ ) {
  random_list.push( nodes[i].innerHTML );
}

random_list.sort( function() {
  return Math.random() - 0.5;
});