JSFiddle - React, Tailwind, and code Playground

by Adrien Clerbois

HTML

<body>


<ul> 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> 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>
</body>
</html>

JavaScript

/***
 Adrien Clerbois 
 Correction for stackoverflow post (http://stackoverflow.com/questions/16529263/adding-an-input-match-randomizer-with-js-jquery)
*/

$(document).ready(function(){
      $('ul').each(function(){
            // get current ul
            var $ul = $(this);
            // get array of list items in current ul
            var $liArr = $ul.children('li');
            // get lenth of the array
            var arrLen = $liArr.length;
            // sort array of list items in current ul randomly
            var $newArr = [];
            do{
                // Generate a randomize int
                var rndNumber = parseInt(Math.random() * arrLen);       
                // Extract a element to add it into new Array
                $newArr.push($liArr.slice(rndNumber,1));
                // Remove the element from the array  
                $liArr.splice(rndNumber, 1);
                // Decrement the length array
                arrLen--;
            }
          while(arrLen >= 0);
          // Add new table
          $(this).append($newArr);        
      });
});