JQuery Bootstrap Responsive Basket Dropdown

JQuery Bootstrap Responsive Basket Dropdown

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.js"></script>
<div class="container">
    
    <nav class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#derma">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">AP</a>
  </div>
  <div class="collapse navbar-collapse" id="derma">
    <ul class="nav navbar-nav">

        
        
        
    <div class="dropdown menu-large">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="">
    Cart <span class="caret"></span>
  </a>


   <ul class="dropdown-menu megamenu row">
                    <div class="col-sm-12 clearfix">
                      
                      <ul id="cart" class='clearfix'></ul><li class="divider"></li>
                        	<div class="btn-group pull-right">
				<a href="#" class="simpleCart_empty btn btn-lg btn-danger">Clear Cart</a>
				<a href="#" class="simpleCart_checkout btn btn-lg btn-success">Checkout Now</a>
				</div>
                    </div>
  </ul>
        </div>
      
      
      </ul>
          </div><!-- /.navbar-collapse -->
    </nav>
    
    
    
<div class="row">
  
    <div class="col-md-3">   
<div class="panel panel-default">
     <div class="panel-heading">Product X</div>
  <div class="panel-body">
 <img src="http://placehold.it/1000x1000/cecc00/" class="img-thumbnail img-responsive"><br> 
     <p class='input-sm clearfix'>Description of this product is rather long and so we may need to trim it by using the fantabulous JQuery... again..</p><span class='row'></span>
  </div>
  <div class="panel-footer">  <span class='btn btn-danger...

CSS

#existingDiv {

    padding: 10px;
}


.test{color:brown;border-left:10px solid #ccc;margin-bottom:2px}




.menu-large {
  position: static !important;
}
.megamenu{
  padding: 20px 0px;
  width:100%;
}
.megamenu> li > ul {
  padding: 0;
  margin: 0;
}
.megamenu> li > ul > li {
  list-style: none;
}
.megamenu> li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  color: #999999;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
.megamenu.dropdown-header {
  color: #428bca;
  font-size: 18px;
}
@media (max-width: 768px) {
  .megamenu{
    margin-left: 0 ;
    margin-right: 0 ;
  }
  .megamenu> li {
    margin-bottom: 30px;
  }
  .megamenu> li:last-child {
    margin-bottom: 0;
  }
  .megamenu.dropdown-header {
    padding: 3px 15px !important;

  }
  .navbar-nav .open .dropdown-menu .dropdown-header{
	color:#fff;
  }
}

JavaScript

$(".btn").on('click', function(){
       $("#cart").find("li").unwrap(); // reset the wrap
    doit();
  //jQuery('.megamenu .col-sm-12').html( jQuery('#shoppingbasket').html());
});

  var count = 1;

//function to append and wrap
function doit(){
 
var productID = "123";
$("<li />", {
    id: productID
}).append("product-" +count).appendTo("ul#cart");
count++
  $set = $("ul#cart li");
    // Wrap the items in twos
for(var i=0, len = $set.length; i < len; i+=2){
    $set.slice(i, i+2).wrapAll('<div class="test col-sm-6 col-sm-3"></div>');
} 

 checkCart();
}// end fn
checkCart()
function checkCart(){
    var item = $('ul#cart');
    var items = $('ul#cart li').length;
    if (item.is(':empty')) {
     $("#dLabel").html('  Cart Empty<span class="caret"></span>');

    }else{      $("#dLabel").html('Cart '+ items +' items <span class="caret"></span>')}
}