Shuffling Divs после их рандомизации

Question

Я пытаюсь сделать тест, в котором значения рандомизированы и перемешаны. Но каждый раз, когда он тасует, он теряет элементы div вокруг страницы, они не остаются прежними c

var receivedArray   = JSON.parse('<?php echo json_encode($unserialize);?>');
    const random        = receivedArray;
    const correctAnswer = random.splice(Math.floor(Math.random() * random.length), 1)[0];
    const guess1 = random.splice(Math.floor(Math.random() * random.length), 1)[0];
    const guess2 = random.splice(Math.floor(Math.random() * random.length), 1)[0];
    $(document).ready(function(){
        $("#test-div").append(
            "<div class=\"row\">\n"+
            "<div class=\"col-6\">\n" +
            "<img id=\"testImage\" src=\"\" alt='...' height=\"540px\"/>\n" +
            "</div>\n" +
            "<h4 class=\"Guess\" id=\"Guess\">ATMINI JŪRNIEKU MEZGLA NOSAUKUMU</h4>\n"+
            "<p id=\"description\"></p>"+
            "<div class=\"col-6 shuffle\">\n" +
            "<div class=\"btn guesses\" >"+correctAnswer.nameLV+"</div><br>"+
            "<div class=\"btn guesses\" >"+guess1.nameLV+"</div><br>"+
            "<div class=\"btn guesses\" >"+guess2.nameLV+"</div><br>"+
            "</div>\n" +
            "</div>\n"
        );
        $("#testImage").attr("src", "../Images/uploads/"+correctAnswer.Image);
        //$("#description").html(correctAnswer.descriptionLV);
        console.log("Bwf");
        $.fn.shuffleChildren = function() {
            $.each(this.get(), function(index, el) {
                var $el = $(el);
                var $find = $el.children();

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

                $el.empty();
                $find.appendTo($el);
            });
        };
        $(".shuffle").shuffleChildren();
    });

Это то, что я пробовал до сих пор ...