jQuery drag and drop to specific container to a newly added container

Question

Please help me about my problem with jQuery drag and drop.

I have successfully added the drag and drop to specific container but my problem is that I want to drop an item to another container however I can only drop the item to the last added field and I can't drop to the previously added field. Is there something wrong with my code? Please give me some advice. Thanks a lot in advance.

I have added the snippet.

$('.box-item').draggable({
  cursor: 'move',
  helper: "clone",
  revert: false
});

function add_new_fields(type) {
  var max_field = $('.box-' + type).length + 1;
  $(".droppable-container-" + type).append('<div id="container' + type + '_' + max_field + '" class="box-container box-' + type + '"></div>');
  initialize(type);
}
    
function initialize(type) {
  for (i = 0; i < $(".box-" + type).length; i++) {
    var no = i + 1;
    $("#container" + type + "_" + no).droppable({
      drop: function (event, ui) {

        var itemid = $(event.originalEvent.toElement).attr("itemid");

        $('.box-item').each(function () {
          if ($(this).attr("itemid") === itemid) {
            $(this).appendTo("#container" + type + "_" + no);
          }
        });
      }
    });
  }
}

function recycleItem($item) {
  $item.fadeOut(function () {
    $item
    .appendTo("#choices_container")
    .fadeIn();
  });
}

// remove dropped elements from container
$(".removable").on("click", function (event) {
  var $item = $(this),
      $target = $(event.target);

  if ($target.is(".removable")) {
    recycleItem($item);
  }

  return false;
});

.cat1, .cat2{
  width: 250px;
  display: inline-block;
  border: solid 1px #aaa;
  padding: 10px;
  vertical-align: top;
}
#choices_container{
  min-height: 200px;
}
.box-container {
  min-height: 50px;
  height: 100%;
  border: solid 1px #aaaaaa;
  margin-bottom: 5px;
}

.box-item {
  cursor: move;
  background: #D9EDF7;
  width: 235px;
  z-index: 1000;
  padding: 10px;
  margin-bottom: 4px;
  border: solid 1px #BCE8F1;
  border-right: solid 10px #aaaaaa;
}
.box-item input[type="text"]{
  border-radius: 0;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<!--heading 1-->
<div class="cat1">
  <h4>Category A</h4>
  <div class="droppable-container-1"></div>
  <button class="btn btn-default add-droppable-field-1" onclick="add_new_fields(1);">Add Field</button>
</div>

<!--heading 2-->
<div class="cat2">
  <h4>Category B</h4>
  <div class="droppable-container-2"></div>
  <button class="btn btn-default add-droppable-field-2" onclick="add_new_fields(2);">Add Field</button>
</div>

<div id="choices_container">
  <div itemid="1" class="box-item removable">ITEM 1</div>
  <div itemid="2" class="box-item removable">ITEM 2</div>
  <div itemid="3" class="box-item removable">ITEM 3</div>
  <div itemid="4" class="box-item removable">ITEM 4</div>
</div>

Answer 1

It seemed that I figure it out. Please see my answer. Thanks everyone!

$('.box-item').draggable({
  cursor: 'move',
  helper: "clone",
  revert: false
});

function add_new_fields(type) {
  var max_field = $('.box-' + type).length + 1;
  $(".droppable-container-" + type).append('<div id="container' + type + '_' + max_field + '" class="box-container box-' + type + '"></div>');
  initialize(type);
}

function add_new_fields(type) {
  var max_field = $('.box').length + 1;
  $(".droppable-container-" + type).append(
    '<div id="container' + max_field + '" class="box-container box"></div>'
  );
  initialize(type, max_field);
}

function initialize(type, max_field) {

  $("#container" + max_field).droppable({
    drop: function (event, ui) {

      var itemid = $(event.originalEvent.toElement).attr("itemid");

      $('.box-item').each(function () {
        if ($(this).attr("itemid") === itemid) {
          $(this).appendTo("#container" + max_field);
        }
      });

    }
  });
}

.cat1, .cat2{
  width: 250px;
  display: inline-block;
  border: solid 1px #aaa;
  padding: 10px;
  vertical-align: top;
}
#choices_container{
  min-height: 200px;
}
.box-container {
  min-height: 50px;
  height: 100%;
  border: solid 1px #aaaaaa;
  margin-bottom: 5px;
}

.box-item {
  cursor: move;
  background: #D9EDF7;
  width: 235px;
  z-index: 1000;
  padding: 10px;
  margin-bottom: 4px;
  border: solid 1px #BCE8F1;
  border-right: solid 10px #aaaaaa;
}
.box-item input[type="text"]{
  border-radius: 0;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<!--heading 1-->
<div class="cat1">
  <h4>Category A</h4>
  <div class="droppable-container-1"></div>
  <button class="btn btn-default add-droppable-field-1" onclick="add_new_fields(1);">Add Field</button>
</div>

<!--heading 2-->
<div class="cat2">
  <h4>Category B</h4>
  <div class="droppable-container-2"></div>
  <button class="btn btn-default add-droppable-field-2" onclick="add_new_fields(2);">Add Field</button>
</div>

<div id="choices_container">
  <div itemid="1" class="box-item removable">ITEM 1</div>
  <div itemid="2" class="box-item removable">ITEM 2</div>
  <div itemid="3" class="box-item removable">ITEM 3</div>
  <div itemid="4" class="box-item removable">ITEM 4</div>
</div>