JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

JavaScript

const playerIds = ["aad1e0aa-12c3-4cf7-8543-8f6273caeb52", "d0c700e4-af30-4765-b532-008da253a81c", "620708fb-1c64-4421-881d-20d5b170fcf7", "4dbfebaf-4843-4fb7-b1bf-bfd91ab765dd", "6c0b286a-7070-4693-969f-207ca673a5c4", "928a1201-1262-4746-8f1e-117cd93b367b", "4d5b61dd-f61d-4f6b-928b-c69df346ca45", "e00583f0-206c-45c6-b1f4-ef1ce54abdd8", "c952de35-37a9-4c7b-bc62-16d32b045b3d", "97a955d0-91fc-455f-9faf-d796860e28a3", "657c0a3f-8303-452a-979e-5e6da0f96dd7", "207e67e7-2848-4134-90e9-7684b31bebc0", "3107ce73-27a5-40a2-b6a6-a75f7ed468ba"];

const listOfIds = ['3107ce73-27a5-40a2-b6a6-a75f7ed468ba', 'e00583f0-206c-45c6-b1f4-ef1ce54abdd8', 'd0c700e4-af30-4765-b532-008da253a81c', ''];

const players = [{
    "id": "aad1e0aa-12c3-4cf7-8543-8f6273caeb52",
    "name": "Hulk",
    "company": "Marvel",
    "regularPlayer": false,
    "proPlayer": false,
    "hand": "right",
    "handicap": 0
  },
  {
    "id": "d0c700e4-af30-4765-b532-008da253a81c",
    "name": "Iron Man",
    "company": "Marvel",
    "regularPlayer": true,
    "proPlayer": true,
    "hand": "left",
    "handicap": 0
  },
  {
    "id": "620708fb-1c64-4421-881d-20d5b170fcf7",
    "name": "Ant Man",
    "company": "Marvel",
    "regularPlayer": true,
    "proPlayer": false,
    "hand": "left",
    "handicap": 0
  },
  {
    "id": "4dbfebaf-4843-4fb7-b1bf-bfd91ab765dd",
    "name": "Spider-Man",
    "company": "Marvel",
    "regularPlayer": true,
    "proPlayer": false,
    "hand": "right",
    "handicap": 0
  },
  {
    "id": "6c0b286a-7070-4693-969f-207ca673a5c4",
    "name": "Captain America",
    "company": "Marvel",
    "regularPlayer": true,
    "proPlayer": true,
    "hand": "right",
    "handicap": 0
  },
  {
    "id": "928a1201-1262-4746-8f1e-117cd93b367b",
    "name": "Deadpool",
    "company": "Marvel",
    "regularPlayer": false,
    "proPlayer": false,
    "hand": "right",
    "handicap": 0
  },
  {
    "id": "4d5b61dd-f61d-4f6b-928b-c69df346ca45",
    "name": "Batman",
    "company": "DC",
   ...