Перемешать массивы по парам Jquery

Всем привет!

Помогите пожалуйста решить простую задачу.

Задача: Разбить массив по парам и вывести в html

В моем варианте я могу перемешать массив и вывести результат в консоль, но почему-то в html блок выводит только последний элемент.

Вопрос: подскажите как вывести весь перемешанный массив в html блок по парам.

let pairs = $('.pairs')

pairs.click(function(){

  let names = ['Ваня', 'Петя', 'Степа', 'Маша', 'Катя'];
  
  $.each(names, function(index, value){
  
    function shuffle(value) {
              names.sort(() => Math.random() - 0.5);
            }
            
            shuffle(value);
        
         console.log(value, index);
     $('.result').html(value)
  })
  

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="result"></div>
<button class="pairs">Перемешать</button>


Ответы (1 шт):

Автор решения: Алексей Шиманский

let pairs = $('.pairs')

pairs.click(function(){
  let names = ['Ваня', 'Петя', 'Степа', 'Маша', 'Катя'];
  
  $.each(names, function(index, value){
        function shuffle(value) {
            names.sort(() => Math.random() - 0.5);
        }

        shuffle(value);                      
  })
  
  $('.result').html(names.join(' '));  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="result"></div>
<button class="pairs">Перемешать</button>

→ Ссылка