JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="people">People
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<hr />
<ul id="jobs">Jobs
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<hr />
<ul id='newList'>New List</ul>

JavaScript

jQuery.fn.shuffle = function () {
    var j;
    for (var i = 0; i < this.length; i++) {
        j = Math.floor(Math.random() * this.length);
        $(this[i]).before($(this[j]));
    }
    return this;
};
$(document).ready(function () {
    $('#jobs').find('li').shuffle();
    var mynewlist = '';
    $('#people').find('li').each(function (index) {
        var el = $('#people').find('li').eq(index);
        var jb = $('#jobs').find('li').eq(index);
        mynewlist += '<li>Person:' + el.text() + ' Job:' + jb.text() + '</li>';
    });
    $(mynewlist).appendTo('#newList');
});