JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    function addGoalkeeperByClickEvent(playerName) {
   			 $('.goalkeeper').on('click', function () {
          $('#goalie').html("<img src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1188/shirt-333.svg'>".concat(playerName));
        });        
      };

    function addDefenderByClickEvent(playerName) {
         $('.defender').on('click', function () {
         
         
         
          if( $('#defendLine').find('img').length ){
         	
            
            $('#defendLine div:has(p)').next().html("<img src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1188/shirt-333.svg'>".concat(playerName));  
                
         	}else{          	            
              $('#defendLine div:first').html("<img src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1188/shirt-333.svg'>".concat(playerName));                              
          }
         
      
        	});
    };
        /*
          $('#defendLine div:has(img)').next().html("<img src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1188/shirt-333.svg'>".concat(playerName));                   
        */
            
      
</script>



<div id="container">
  <!-- header -->
  <header id="header">
    <h1 id="title">Test Soccer Game</h1>
  </header>
  <!-- Navigation -->
  <nav id="menu" class="clearfix">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">back to the tutorial</a></li>
    </ul>
  </nav>
  <!-- SIDBAR LEFT -->
  <aside id="sidebar">
    <form action="#">
      <label>Kapitän:
        <select name="top5">
          <option>Spieler 1</option>
          <option>Spieler 2</option>
        </select>
      </label>
    </form>
...

CSS

body {
  margin: 0;
  padding: 0;
  /*
  background-image: url(bg2.jpg);
  */
  background-repeat: no-repeat;
  background-color: #272B30;
}


/* Imports
--------------------------------------------- */

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* Helper Classes
--------------------------------------------- */

.clearfix {
  display: block;
  clear: both;
}


/* Typography
--------------------------------------------- */

body {
  font-size: 18px;
  line-height: 32px;
  color: #333;
  word-wrap: break-word !important;
  font-family: 'Open Sans', sans-serif;
}

p {
  margin: 0 0 24px;
  margin: 0 0 2.4rem;
  padding: 0;
}


/* Links
--------------------------------------------- */

a {
  text-decoration: none;
  color: #FF5722
}

a:hover {
  text-decoration: underline;
  color: #E64A19;
}


/* Headings
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #333;
  font-family: "Roboto Slab", sans-serif;
  font-weight: 700;
  margin: 0 0 16px;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}


/* Sections
--------------------------------------------- */

#container {
  margin: 0 auto;
  max-width: 1800px;
}


/* Header
--------------------------------------------- */

header {
  width: 99%;
  height: 75px;
  background-color: #000000;
  padding: 0.5%;
}

header #title {
  font-size: 20px;
  color: #fff;
}


/* Navigation
--------------------------------------------- */

nav {
  width: 97%;
  background-color: black;
  padding: 0 1.5% 0 1.5%;
  opacity: 0.5;
}

nav ul li {
  display: inline-block;
  padding: 15px 1.5% 15px 1.5%;
}

nav ul li a {
  text-decoration: none;
  color: #ffffff;
  font-size: 1.2em;
}

nav ul li a:hover {
  color: #000000;
  text-decoration: none;
}


/* Content
---------------------------------------------...

JavaScript

$(function() {
  $(".goalkeeper, .defender, .forward").draggable({
    appendTo: "body",
    revert: "invalid",
    cursor: "move",
    cursorAt: {      
      top: 5,
      left: 0
    },
    helper: function() {
      var displayImage = $("<img>", {
        width: "5%",
        src: 'https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1188/shirt-333.svg'
      }).data("type", $(this).data("type"));
      return displayImage;
    }
  });




  $("#field").on("click", "span.remove", function() {
    var me = $(this).parent(); // p
    var parent = me.parent(); // div
		//var title = 'parent.data("title")';     
    var title = '';
    parent.data("type", "").html("<p>" + title + "</p>");
    
  });
  
  
  $("#goalie").droppable({
    accept: ".goalkeeper",
    classes: {
      "ui-droppable-active": "ui-state-default"
    },
    drop: function(event, ui) {
      var removeButton = $("<span>", {
        class: "ui-icon  ui-icon-circle-close remove"
      });
     
      var dropImage = $("<img>", {
        width: "100%",
        src: ui.helper.attr("src")
      });
      
      $( this ).append( ui.draggable.text() );
            
      $(this)
        .data("type", ui.helper.data("type"))
        .data("title", $(this).text())
        .find("p")
        .html(dropImage);
        
      removeButton.appendTo($(this).find("p")).position({
        my: "left bottom",
        at: "right top",
        of: $(this).find("img")
      });
      
    }
  });
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  $("#defendie,#defendie2,#defendie3").droppable({
    accept: ".defender",
    classes: {
      "ui-droppable-active": "ui-state-default"
    },
    drop: function(event, ui) {
      var removeButton = $("<span>", {
        class: "ui-icon  ui-icon-circle-close remove"
      });
      var dropImage = $("<img>", {
        width: "100%",
        src: ui.helper.attr("src")
      });
      $( this ).append( ui.draggable.text() );
      $(this)
        .data("type",...