Проблема в перетаскивании кода jquery на динамические элементы

Question

У меня html как

       <textarea name="comment_description" rows="10" id="comment_description"  class="validate-required form-control"></textarea>

         <div class="col-sm-2">
             <b>Merge Fields</b>
              <div id="dragdiv">
                 <div id="allItems">

                 </div>
              </div>
         </div>

Сначала я пытаюсь динамически заполнить все элементы, используя строки кода ниже

   function fetchMergeFields() {
        $.ajax({
            url: './?secController=CommentTemplate&action=fetchMergeFields',
            type: 'POST',
            dataType: 'JSON',
            success: function (data) {
                var NoOfItems = data[0]["items"].length;
                   for (var i =0; i < NoOfItems; i++) {
                            $("#allItems").append('<span id=node'+i+'>' + data[0]["items"][i]["name"] + '</span><br>');
                     }
                 }
             });
          }

В браузере элементы отображаются как

           <div id="allItems">
                 <span id="node0">[Student Name]</span><br>
                 <span id="node1">[SSN]</span><br>
                 <span id="node2">[Date.Of.Birth]
                 ... 
            </div>

Я использую перетаскивание jquery из этой библиотеки http://www.authorcode.com/drag-and-drop-li-elements-into-textbox/, чтобы пользователь мог добавлять элемент из allItems div в текстовую область путем перетаскивания.

Я реализовалниже строки кода для перетаскивания.

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

     <script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script>
  <script type="text/javascript">

   fetchMergeFields();

    $(document).ready(function () {

        $(":input.validate-required").on('change', function () {
            $(this).closest(".form-group").removeClass("has-error");
            $(this).next('small').addClass('hide');
        });

        $(":input.validate-required").on('keyup', function () {
            $(this).closest(".form-group").removeClass("has-error");
            $(this).next('small').addClass('hide');
        });

        var jq = $.noConflict();

        jq("#dragdiv span").draggable({
            appendTo: "body",
            helper: "clone",
            cursor: "move",
            revert: "invalid"
        });

        initDroppable(jq("#comment_description"));
        function initDroppable($elements) {
            $elements.droppable({
                over: function(event, ui) {
                    var $this = jq(this);
                },
                drop: function(event, ui) {
                    var $this = jq(this);
                    if ($this.val() == '') {
                        $this.val(ui.draggable.text());
                    } else {
                        $this.val($this.val() + " " + ui.draggable.text());
                    }
                }
            });
        }

    });

 </script>

Теперь проблема в том, что приведенный выше код перетаскивания иногда работает, но в большинстве случаев он не работает.Затем я попытался добавить элементы непосредственно в allItems внутри файла кода html-страницы, т.е. без вызова функции fetchMergeFields ().Работает нормально.Я не могу отследить актуальную проблему.Пожалуйста, помогите !!!