JSFiddle - React, Tailwind, and code Playground

by Tistklehoff

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div class="player-widget">
  <label for "players">Players</label>
  <input id="player" />
  <input id="playerGUID" hidden />
  <button id="add">Add</button>
</div>

JavaScript

$(document).ready(function() {


  var echoData = {
    json: ko.toJSON({
      "players": [{
        "guid": "1",
        "name": "Matias Aguero",
        "position": 1
      }, {
        "guid": "2",
        "name": "George Catchpole",
        "position": 2
      }]
    }),
    delay: 1
  };

  var availablePlayers = [{
        "guid": "1",
        "name": "Matias Aguero",
        "position": 1
      }, {
        "guid": "2",
        "name": "George Catchpole",
        "position": 2
      }]; // BLANK ARRAY OF PLAYERS
  console.log(echoData);
  $("#player").autocomplete({
    source: availablePlayers,
    response: function(event, ui) {
      ui.content = $.map(ui.content, function(value, key) {
        return {
          label: value.name,
          value: value.guid,
        }
      });
    },
    focus: function(event, ui) {
      $("#player").val(ui.item.label);
      return false;
    },
    select: function(event, ui) {
      $("#player").val(ui.item.label); // display the selected text
      $("#playerGUID").val(ui.item.value); // save selected id to hidden input
      return false;
    }
  });


  $.ajax("/echo/json/", {
    //post the request to /echo/json/ and specify the correct datatype
    url: '/echo/json/',
    dataType: 'json',
    data: echoData,
    success: function(data) {
      console.log("received " + ko.toJSON(data));
      data = JSON.parse(echoData.json);
      console.log("received " + ko.toJSON(data));
      var feedHTML = '';
      // LOOP THROUGH EACH PLAYER
      $.each(data.players, function(i, player) {

        // DEFINE VARIABLES - BASED ON PLAYER ATTRIBUTES
        var guid = player.guid;
        var name = player.name;
        var dob = player.date_of_birth;
        var birth = player.birthplace;
        var height = player.height;
        var weight = player.weight;
        var position = player.position;
        var honours = player.honours;

        // CREATE NEW PLAYER (OBJECT)
        var player = {
          guid:...