Clonned Sortable

by Peter Abramowicz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<section>
  <div id="0" class="well">
    <span>Item 0</span>
    <span>Item 0</span>
    <span>Item 0</span>
    <span>Item 0</span>
    <span>Item 0</span>
    <span>Item 0</span>
    <button>Add Block 1</button>
  </div>
</section>

CSS

.well { 
  background-color: #ececec;
  border: 1px solid black;
  margin: 5px 0;
  min-height: 60px;
  padding: 5px;
  position: relative;
}
.well span {
  display: block;
  padding: 0 20px;
  border: 1px solid #ccc;
  width: 50px;
}
.well button {
  position: absolute;
  left: 100px;
  bottom: 5px;
}

JavaScript

(function() {
  let list_counter = 1;

  $('button').click(function() {
    addElement();
  });

  let addElement = function() {
    
    let newElement = $('#0').clone(true);
    
    newElement.attr('id',list_counter);
    newElement.children().each(function() {
      if($(this).is('span')){
        $(this).text('Item '+list_counter);
      }
      if($(this).is('button')) {
      	$(this).text('Add Block '+(list_counter+1));
      }
    });

    newElement.appendTo('section');
    makeSortable();
    list_counter++;
  };

  let makeSortable = function() {
    $(".well").sortable({
      axis: "y",
      revert: true,
      items: 'span',
      cursor: "move",
      connectWith: ".well",
      activate: function(event, ui) {}
    });
  };

  makeSortable();
}());