JQuery wrap into groups. Add LI to UL.

JQuery wrap into groups. Add LI to UL.

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">
    
    <h2>This is work in progress - not complete </h2>

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown <span class="caret"></span>
  </a>


  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  </ul>
</div>


<hr class='container'>
    
    <span class='btn btn-danger btn-lg'>ADD</span>

<ul id="shoppingcart">
        <li>item</li>
     <li>item</li>
     <li>item</li>
     <li>item</li>
     <li>item</li>  <li>item</li>
     <li>item</li>
     <li>item</li>  <li>item</li>
     <li>item</li>
     <li>item</li>  <li>item</li>
     <li>item</li>
     <li>item</li>  <li>item</li>
     <li>item</li>
 

</ul>

    </div>

CSS

.new { border-bottom: solid 1px #ddd; padding: 5px; }

div.list {
    margin: 4px;
    border: 2px dashed orange;
}

JavaScript

$(".btn").on('click', function(){
    $('ul:eq(0),ul#shoppingcart').append($('<li>', {
         'text': 'Product X',
         'class': 'new',
         'data-price': '9.99',
         'data-name': 'product X',
         'data-pic' : '/img/products/prodx.jpg'    
    }));
 
    checkBasket();

    
    
});
        
                 checkBasket();
             function checkBasket(){  
    $('ul#shoppingcart > li:nth-child(4n-1)').each(function() {
    $(this).next().add(this).wrapAll('<div class="list col-sm-6 col-sm-3"></div>');
}).eq(0).closest('div').unwrap();
    
   $(function() {
    var xchildren = $("#shoppingcart").children().clone();
  $("ul#shoppingcart").append(xchildren);  
        });
                 
              
                 
                 
               
             }
 
/*

success(data){

var items = [];

   $.each(data, function(i, item) {

          items.push('<li><a href="yourlink?id=' + item.UserID + '">' + item.Username + '</a></li>');

   });  // close each()

   $('#yourUl').append( items.join('') );

     }

*/