JSFiddle - React, Tailwind, and code Playground

by apaichon

HTML

<ul id="playerList">

</ul>

JavaScript

var players = [
    {id: 1, fullName: 'Alison Becker', position: 'goalkeeper'},
    {id: 13, fullName: 'Adrian', position: 'goalkeeper'},
    {id: 66, fullName: 'Trent Alexander-Arnold', position: 'defender'},
    {id: 26, fullName: 'Andy Robertson', position: 'defender'},
    {id: 4, fullName: 'Virgil van Dijk', position: 'defender'},
    {id: 6, fullName: 'Deja Lovren', position: 'defender'},
    {id: 32, fullName: '๋Joel Matip', position: 'defender'},
    {id: 12, fullName: '๋Jose Gomez', position: 'defender'},
    {id: 3, fullName: '๋Fabinho', position: 'midfielder'},
    {id: 5, fullName: '๋Georginio Wijnaldum', position: 'midfielder'},
    {id: 7, fullName: '๋James Milner', position: 'midfielder'},
    {id: 8, fullName: '๋Naby Keita', position: 'midfielder'},
    {id: 14, fullName: '๋Jordan Handerson', position: 'midfielder'},
    {id: 15, fullName: '๋Alex Oxlade-Chamberlain', position: 'midfielder'},
    {id: 20, fullName: '๋Alam Lallana', position: 'midfielder'},
    {id: 23, fullName: '๋Xherdan Shaqiri', position: 'midfielder'},
    {id: 40, fullName: '๋Ryan Kent', position: 'midfielder'},
    {id: 9, fullName: '๋Roberto Firmino', position: 'forward'},
    {id: 10, fullName: '๋Sadio Mane', position: 'forward'},
    {id: 11, fullName: '๋Mohamed Salah', position: 'forward'},
    {id: 24, fullName: '๋Rhian Brewster', position: 'forward'},
    {id: 27, fullName: '๋Divock Origi', position: 'forward'},
  ]
  let playerList = document.getElementById('playerList');
  for (let i =0;i<players.length;i++) {
    let entry = document.createElement('li');
		entry.appendChild(document.createTextNode(players[i].id + ' ' + players[i].fullName + ' ' + players[i].position ));
	  playerList.appendChild(entry);
  }