Cannot drop into cloned containers in Rubaxa's Sortable.js

Question

Here is my fiddle : SORTABLE-DEMO

"Widgets" is from where I can pull clones and "Group1" that has id="B" is where I can drop the clones into. I am creating clones on click of "+", attaching the id="B" attribute to be able to drop into these clones. However, dropping is not possible. (Maybe because of duplicate ids)

Is there any other way to solve this?

Any help would be much appreciated. Thank you..

new Sortable(document.getElementById('B'), {
  group: {
    name: 'letters',
    put: true
  },
  onAdd: function(event) {
    console.log(event.item);
  }
});


$('#addRow').on('click', function(e) {
  var len = $('.child-border').length;
  $('.parent-border').clone().attr('id','B')
    .toggleClass('parent-border child-border').hide()
    .appendTo('#container').slideDown('slow');
});

Answer 1

I've never used RubaXa... so had to fiddle through it.

Example: https://jsfiddle.net/Twisty/jsnvxsev/1/

HTML

<ul id="widgets-1">
  <h5>Widgets</h5>
  <br>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<br>
<ul id="widgets-2">
  <h5>Group 1</h5>
  <br>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<br>
<ul class="parent-border">
  <div class="form-group">
    <div class="col-sm-12">
      <button type="button" id="deleteRow" class="btn btn-danger btn-circle btn-lg pull-right"><i class="glyphicon glyphicon glyphicon-trash"></i></button>
    </div>
  </div>
</ul>
<div id="container"></div>
<div class="form-group">
  <div class="col-sm-12">
    <button type="button" id="addRow" class="btn btn-success btn-circle btn-lg center-block"><i class="glyphicon glyphicon-plus"></i></button>
  </div>
</div>

JavaScript

new Sortable($('#widgets-1')[0], {
  group: {
    name: 'letters',
    put: false,
    pull: 'clone',
  },
  setData: function(dataTransfer, element) {
    dataTransfer.setData('text', element.textContent);
  },
  sort: false
});
new Sortable($('#widgets-2')[0], {
  group: {
    name: 'letters',
    put: true
  },
  onAdd: function(event) {
    console.log(event.item);
  }
});

$('#addRow').on('click', function(e) {
  var len = $('.child-border').length;
  var widgCount = $("[id|='widgets']").length;
  $('.parent-border').clone().attr('id', 'widgets-' + ++widgCount)
    .toggleClass('parent-border child-border').hide()
    .appendTo('#container').slideDown('slow');
  new Sortable($("#widgets-" + widgCount)[0], {
    group: {
      name: 'letters',
      put: true
    },
    onAdd: function(event) {
      console.log(event.item);
    }
  });
});

$('#container').on('click', '[id=deleteRow]', function(e) {
  $(this).closest('.child-border, .parent-border').remove();
});

After adding the cloned structure, I suspected you needed to initialize the structure for Sorting. This seems to do the trick.