JSFiddle - React, Tailwind, and code Playground

by MasterAlex

HTML

<div class="row">
    <div class="col-xs-12">
        <h4>Пары игроков</h4>
        <div class="group"></div>
    </div>
</div>
<div class="row">
    <div class="col-xs-6 col-xs-offset-3">
        <button  class="btn btn-primary btn-block" id="start">Провести жеребьёвку</button>
    </div>
</div>

CSS

h4 {
    text-align: center;
}
p {
    margin-left: 15px;
}

button {
    margin-top: 40px;
}

JavaScript

var array = ["Зуз","Чапай","Тёма","Жданов","Игорь","Арман","Дима","Первов","Лена","Тоха","Саша","Рома","Коля","Олег","Белов","Катя"];

function sRand() {
    return Math.random() > 0.5 ? 1 : -1;
}

array.sort(sRand);

$(document).ready(function() {
    $('#start').on('click', function() {
        var i=0;
        for(var k=1;k<9;k++) {            
            $('.group').append('<p>'+ k +'. '+ array[i] +' - ' + array[i+1] + '</p>');
            i++;
            i++;
        }
        
        $(this).hide();
    });
});