Filter / move / insertBefore / items

Filter / move / insertBefore / items

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container-fluid">

        
        
         
      
            <div class="col-xs-12">
                <div class="col-xs-6">
<h3>Pending</h3><hr>
                    </div>
                      <div class="col-xs-6">
<h3>Done</h3><hr>
                    </div>
            </div>
<div class="col-xs-12">
   <div class="todolist col-xs-6 pending">
  <li class="ingredient">Build App</li>
    <li class="ingredient">Complete Admin</li>
    <li class="ingredient">Contact Clients</li>
    <li class="ingredient">Change Graphics</li>
    <li class="ingredient">Design brand</li>
</div>
<div class="todolist col-xs-6 complete">
    <li class="ingredient">Offer advice</li>
    <li class="ingredient">Get ripped off</li>
    <li class="ingredient">Trust no-one</li>
    <li class="ingredient">Try to be nice</li>
    <li class="ingredient">Deliver on Time</li>
</div>
            </div>
                    
                        </div>
                
            <hr>

                
                <div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
 <span>0% Complete</span>
  </div>
</div>

CSS

ol {margin-left:70px;list-style-type:decimal;float:left;cursor:pointer;}
.complete li{color:green;cursor:pointer}
.pending li{color:red;cursor:pointer}
.inline{display:inline-block;}
li:hover {
    background: #e0e7ca;
      color: #60654f;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    cursor: pointer;
}

JavaScript

$(".ingredient").click(function(){
    var element = $(this);
    var added = false;
    var targetList = $(this).parent().siblings(".todolist")[0];
    $(this).fadeOut("fast", function() {
        $(".ingredient", targetList).each(function(){
            if ($(this).text() > $(element).text()) {
                $(element).insertBefore($(this)).fadeIn("fast");
                added = true;
                return false;
            }
                  
        });  
        if(!added) {$(element).appendTo($(targetList)).fadeIn("fast");}
       timeline();
    });
                           
});


timeline();
function timeline(){
    
    	var $total = $(".todolist").find("li.ingredient").length;
		var $current =$(".todolist.complete").find("li.ingredient").length;
		var $percent = ($current/$total) * 100;
        //progress status
        $('.progress-bar span').text($percent+'% complete')
		$('.progress').find('.progress-bar').css({width:$percent+'%'});

    if(  $('.progress-bar span').html() == "100% complete"){$("body").html("<h1>My work is done and ANA IS FREEEE :)  whoooooooooo!!!</h1>")}

}