append and remove jquery

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<input id="twitchID" type="text" placeholder="Enter TwitchID Here" />
<button id="addPlayer"> Add </button>
<button id="remPlayer"> Remove </button>

<div id="box">
  <span><img src="http://placehold.it/50x50"></span>
</div>

CSS

#box {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
  width: 200px;
  background-color: lightgreen;
  flex-wrap: wrap;
}

span {
  margin-right: 5px;
  margin-left: 5px;
}

JavaScript

// ADD PLAYER
$('#addPlayer').click(function() {
  var twitchID = $('#twitchID').val();

    $('#box').append('<span id="' + twitchID + '-photo"><img src="http://placehold.it/50x50"></span>');
});

// REMOVE PLAYER
$('#remPlayer').click(function() {
  var twitchID = $('#twitchID').val();

    $('#' + twitchID + '-photo').remove();
});