Moving an Appended Div tag up and down using Jquery
<p>I am trying to make a to do app for my final project. The problem I am having is I would like the div tags to be able to be moved up or down an element depending on what the user clicks. I can make this work with preexisting div tags, but appended div tags the code falls apart. Any insight would greatly be appreciated. I have the code up on codepen so I will provide a link there and I will also display my code here.</p>

<pre><code>$('#addTask').click(function(){
   var task = $('#taskadd').val();
     var date = $('#datepicker').val();
        $('&lt;div id="items"&gt;&lt;div class="card-header"&gt;&lt;span class="up" id="up"&gt;&lt;/span&gt;&lt;span class="down" id="down"&gt;&lt;/span&gt;&lt;p&gt;Due Date:'+date+'&lt;/p&gt;&lt;p&gt;Task:'+task+'&lt;/p&gt;&lt;div&gt;&lt;/div&gt;').appendTo('.container').slideDown('slow');;
     resetModal();
     counter++;
   });
    var selected=0;

     var itemlist = $('#items');
    var len=$(itemlist).children().length; 
    console.log(len);

    $(document).on('click', '#items div',function(){
        selected= counter;

        alert("Selected item is " + selected);
    });

  $(document).on('click', '#up',function(e){

       e.preventDefault();
       if(selected&gt;0)
        {

            jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected)));
            selected=selected-1;
        }
    });

    $(document).on('click', '#down',function(e){
         e.preventDefault();
        if(selected &lt; len)
        {
            jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected)));
            selected=selected+1;
        }
    });



});
</code></pre>

<p>My codepen is:<a href="http://codepen.io/louis345/pen/dOqdQW" rel="nofollow noreferrer">http://codepen.io/louis345/pen/dOqdQW</a>.</p>

<p>Any help will be greatly appreciated. Hopefully my issue is clear. </p>