title: adding new and close button to sortable grid
body: <p>ive been strugling to make add and close button to work but i dont know how and ive been trying to look it up but i didnt find anything, can anyone please help or point me in the right direction
  these are my code :</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>$(function() {
    $('.sortable').sortable();
    $('.handles').sortable({
      handle: 'span'
    });
    $('.connected').sortable({
      connectWith: '.connected'
    });
    $('.exclude').sortable({
      items: ':not(.disabled)'
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;h1,
  h2 {
    text-align: center;
    font-weight: normal;
  }
  
  #features {
    margin: auto;
    width: 460px;
    font-size: 0.9em;
  }
  
  .connected,
  .sortable,
  .exclude,
  .handles {
    margin: auto;
    padding: 0;
    width: 510px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .sortable.grid {
    overflow: hidden;
  }
  
  .connected li,
  .sortable li,
  .exclude li,
  .handles li {
    list-style: none;
    border: 1px solid #CCC;
    background: #F6F6F6;
    font-family: "Tahoma";
    color: #1C94C4;
    margin: 5px;
    padding: 5px;
    height: 22px;
  }
  
  .handles span {
    cursor: move;
  }
  
  li.disabled {
    opacity: 0.5;
  }
  
  .sortable.grid li {
    line-height: 80px;
    float: left;
    width: 100px;
    height: 100px;
    text-align: center;
  }
  
  li.highlight {
    background: #FEE25F;
  }
  
  #connected {
    width: 440px;
    overflow: hidden;
    margin: auto;
  }
  
  .connected {
    float: left;
    width: 200px;
  }
  
  .connected.no2 {
    float: right;
  }
  
  .status-closed {
    position: relative;
    top: -40px;
    right: -25px;
  }
  
  .status-closed1 {
    position: relative;
    top: -40px;
    right: -25px;
  }
  
  li.sortable-placeholder {
    border: 1px dashed #CCC;
    background: none;
  }
  
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;section&gt;
    &lt;h2&gt;Grid&lt;/h2&gt;
    &lt;ul class="sortable grid"&gt;
      &lt;li&gt;Item 1&lt;span class="status-closed1"&gt;&lt;a href="#"&gt;X&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;Item 2&lt;span class="status-closed"&gt;&lt;a href="#"&gt;X&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;Item 3&lt;span class="status-closed"&gt;&lt;a href="#"&gt;X&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;Item 4&lt;span class="status-closed"&gt;&lt;a href="#"&gt;X&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/section&gt;
  &lt;br&gt;
  &lt;div class="form-actions text-center"&gt;
    &lt;input type="submit" value="Add" class="btn btn-info"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>