title: Appending <li> to a <ul> but not becoming draggable jQuery
body: <p>I'm trying to have a user build a list of sports, then have that list of sport list items be dragged into a "cart". But any of the appended list items do not become draggable and I'm not too sure why or how to make them so.
  The placeholder list item is able to be dragged but not any of the appended ones.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* JS code for sports.html */
  
  
  $(function () {
      // initialization code when DOM is ready
  
      //hides the second step
      $('#step2').hide();
  
      //tooltips
      $('#addSport').tooltip();
  
      //array of the auto completed sports
      var tags = ["archery", "badminton", "baseball", "softball", "football", "soccer", "volleyball", "basketball", "golf", "hockey", "swimming", "running", "track and field", "gymnastics", "dance", "rowing", "tennis", "wrestling", "weightlifting", "karate", "lacrosse", "cricket", "polo", "skating", "shooting", "handball", "fencing", "cycling", "boxing", "cheerleading", "surfing", "snowboarding", "dodgeball", "jujutso", "sumo", "taekwondo", "paintball", "pocket billiards", "pool", "fishing", "skiing", "sailing", "luge", "bobsleigh", "racquetball"];
      $("#sportName").autocomplete({
          source: function (request, response) {
              var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
              response($.grep(tags, function (item) {
                  return matcher.test(item);
              }));
          }
      });
  
      var sportClick = 0;
      $("#addSport").click(function () {
          sportClick++;
          var sport;
          sport = $("#sportName").val();
          
          //takes the first sport and replaces the holding text
          if (sportClick === 1) {
              $("#sportList").html('&lt;li&gt;' + sport + '&lt;/li&gt;');
              //$("#sportList").html(sport + '&lt;br&gt;');
          } 
          //any other sports will be added to the first
          else {
              $("#sportList").append('&lt;li&gt;' + sport + '&lt;/li&gt;');
              //$("#sportList").append(sport + '&lt;br&gt;');
          }
      });
  
      //allows the sport items become draggable
      $("#sportList li").draggable({
          helper: "clone"
      }).css("cursor", "pointer");
  
      $("#step2Btn").click(function () {
          $('#step2').show();
      });
  
      //allows the sport items to be dropped into the cart
      $("#cart").droppable({
          tolerance: "intersect",
          drop: function (evt, ui) {
              var obj;
              $("#cart").css("height", "auto");
              obj = ui.draggable;
              console.log("dropped!");
              $("#cart").append("&lt;li&gt;" + obj.html() +
                  " (&lt;a href='dummy.html' class='remove'&gt;Remove&lt;/a&gt;)" +
                  "&lt;/li&gt;");
          }
      });
  
      //able to remove a sport item
      $("#cart").on("click", "a.remove", function () {
          console.log("Remove element!");
          $(this).parent().remove();
          return false;
      });
  
      getCart = function () {
          var cartList, el, group1;
          cartList = [];
          $("#cart li").each(function () {
              el = $(this).html();
              console.log("Matching element " + el);
              group1 = el.match(/^(.+) \(&lt;a href/)[1]
              console.log("Match with reg exp: " + group1);
              cartList.push(group1);
          })
          return cartList;
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Sports&lt;/title&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /&gt;
      &lt;script type="text/javascript" src="code.js"&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt;
          #cart {
              border: 2px solid black;
              background-color: lightgray;
              height: 100px;
              width: 300px;
              padding-top: 10px;
              padding-bottom: 10px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;h1&gt;Sports Select&lt;/h1&gt;
  
      &lt;h2&gt;Step 1: Enter in as many sports that you can think of&lt;/h2&gt;
      &lt;p&gt;
          &lt;label&gt;&lt;strong&gt;Sport Name: &lt;/strong&gt;&lt;/label&gt;
          &lt;input type="text" size="15" id="sportName" onfocus="this.value=''" title="Enter a sport name"&gt;
          &lt;input type="button" id="addSport" value="Add Sport" title="Click to add a sport" /&gt;
      &lt;/p&gt;
  
      &lt;h2&gt;Sports List&lt;/h2&gt;
      &lt;ul id="sportList"&gt;
          &lt;li&gt;All entered sports will be entered here.&lt;/li&gt;
      &lt;/ul&gt;&lt;br&gt;
  
      &lt;label&gt;&lt;strong&gt;Click to start step 2: &lt;/strong&gt;&lt;/label&gt;&lt;br&gt;
      &lt;input type="button" id="step2Btn" value="Step 2" title="Click to show step two" /&gt;
  
  
      &lt;h2 id="step2"&gt;Step 2: Drag all the sports that you've played into the box&lt;/h2&gt;
      &lt;br&gt;
  
  
      &lt;h2&gt;Cart&lt;/h2&gt;
      &lt;ul id="cart"&gt;
  
      &lt;/ul&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>