JSFiddle - React, Tailwind, and code Playground

by ryanbrill

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
  <div class="invited">
    
  </div>
  <div class="joined">
    
  </div>
</div>

CSS

.container {
  display: flex;
}
.invited {
  margin-right: 10px;
  
}
.joined {
  
}

JavaScript

/*
var names = [];
$("#playerArea .playerName").each(function(i, name) {
    names.push($(name).text().trim());
});
console.log(names);
*/

var invited = ["Shelly Brill", " Ahmed Rezk", " Amy Manion", "Angel Jacob", "Brad Gray", "Daniel Schafer", "Drew Stromberg", "Isidro Gallegos", "Josh Roth", "Liz Oden", "Matt DeKrey", "Matt Tanis", "Ryan Brill", "Jordan Rhode", "Andrew Owen", "Chris Sewell", "James Alton", "Jeff Hand", "Justin Myers", "Kira Jones", "Laura Torres", "Phillip Jacobs", "Rajendher Burri", "Wendell Rogers"];
var joined =['Liz', 'Kira', 'Drew', 'Raj', 'Jordan Rhode', 'Phillip Jacobs', 'Andrew Owen', 'Ahmed đź‘»', 'Jeff Hand', 'Wendell Rogers', 'Josh Roth', 'Isidro', 'Ryan Brill', 'Matt DeKrey', 'Shelly Brill', 'Chris Sewell', 'Laura', 'Brad Gray'];

invited = invited.map(element => {
  return element.toLowerCase();
})

joined = joined.map(element => {
  return element.toLowerCase();
})

invited.sort();
joined.sort();

$("<div>" + invited.length + "</div>").appendTo(".invited");
for(var i=0; i<invited.length; i++) {
	$("<div>" + invited[i] + "</div>").appendTo(".invited");
}

$("<div>" + joined.length + "</div>").appendTo(".joined");
for(var i=0; i<joined.length; i++) {
	$("<div>" + joined[i] + "</div>").appendTo(".joined");
}