title: jQuery get data attribute on click not working
body: <p>I have a script that will append to <strong>two</strong> places on my web application. One is a list item and the other is a hidden field on a HTML form (which I process the data in a PHP service file).</p>
  
  <p>However, I want that if a user clicks the 'x' icon that all the elements are removed that have the same ID.</p>
  
  <p>I have a good idea how to do this but my script below doesn't even log the ID. The <code>.control</code> block is giving me the issue. The <code>#add</code> code block successfully appends the HTML.</p>
  
  <p>Am I missing something obvious?</p>
  
  <pre><code>$("#add").click(function() {
  
      // RENDER LIST
      var playerList = ""; //
      playerList += "&lt;li class='selection'&gt;" + $("#player").val() + "&lt;i class='fa fa-close control' data-id='" + $("#playerGUID").val() + "'&gt; &lt;/i&gt;" + "&lt;/li&gt;";
  
      $(playerList).appendTo("#playerList");
  
      // ADD GUID TO SUBMISSION VALUES
      var playerHTML = "";
      playerHTML += "&lt;input data-id='" + $("#playerGUID").val() + "' type='hidden' name='playerGUID[]' value='" + $("#playerGUID").val() + "' /&gt;";
  
      $(playerHTML).appendTo("#selected-players");
  
      // CLEAR INPUT FIELD
      $("#player").val('');
  });
  
  $(".control").click(function() {
      $targetID = $(this).attr('data-id');
      console.log("Selected ID:" + $targetID);
  
      // REMOVE WILL COME HERE
  });
  </code></pre>