jquery Ui Sortable div not working after 2 or 3 sorts horizontally

I have a sortable div ("#drop"). I can drag and drop the divs from #origin div to sortable div ("#drop"). but after 2 or 3 sorts of the div inside the sortable div ("#drop"), sorting is not working.I am using a horizontal sorting using div. float left is used for divs.No error is showing. but the sorting will not work after we sort 3 or 4 times. place all three divs inside the drop div and we will able to produce the issue

Any help appreciated

html is as below

 $(document).ready(function(){
    $("#origin").sortable({
        connectWith: "#drop",
          
        remove: function (event, ui) {

           
            debugger;
            if ($(ui.item).find(".removeButton").length == 0) {
              var removeButton = $("<span class='removeButton'>X</span>").click(function () {
                    $(ui.item).find('span').remove()
                    $(ui.item).remove();
                    $("#origin").append(ui.item);
                    if ($("#drop").find('span').length == 0) {
                        $("#placeholder").show();
                    }
                    else {
                        $("#placeholder").hide();
                    }
                   

              });

               
              if ($("#drop").find('span').length = 0)
              {
                  $("#placeholder").show();
              }
              else
               {
                  $("#placeholder").hide();
               }
                $(ui.item).append(removeButton);
            }
        },
       
       
    });
   
    
 //var removeIntent = false;
 //       $('#drop').sortable({
 //           over: function () {
 //               removeIntent = false;
 //           },
 //           out: function () {
 //               removeIntent = true;
 //           },
 //           beforeStop: function (event, ui) {
 //               if(removeIntent == true){
 //                   ui.item.remove();
 //$("#origin").append(  ui.item);
 //               }
 //           }
 //       });

   $("#drop").sortable({
       connectWith: "#origin",
       cancel: "ui-state-disabled",
         
   });

  
  
  });

        .removeButton {
    float:right;
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
}
 
.removeButton:hover {
    float:right;
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
    color:#fff;
}
        #origin {
             width: 150px;
            min-height: 120px;
              
        }

            #origin img, #drop img {
                margin-top: 3px;
                margin-left: 5px;
            }

        #drop {
            min-height: 30px;
        }

        .over {
            border: solid 5px purple;
        }

        .draggable {
            border: solid 2px gray;
            width: 140px;
        }

        #drop .draggable {
           display:block;float:left;
        }

        .fbox{
                border: solid 1px gray;
                height:40px;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="col-lg-12">
              <div  class="col-lg-4">
                <div id="wrapper">
                    <div id="origin"  >
                        <div id="Country" title="one" class="draggable">Country</div>
                        <div id="region" title="two" class="draggable">Region</div>
                        <div id="DEPTNO" title="three" class="draggable">DeptNo</div>
                    </div>
                    <p></p>

                </div>
        
        </div> <div class="col-lg-8">
        
                   <div class="row">
                       <div class="col-lg-8">
                           <div id="drop" class="fbox">
                               <div id="placeholder" class="ui-state-disabled" draggable="false">Drag a column and drop it here to group by that column</div>
                           </div>
                       </div>

                       <div class="col-lg-4">  <input type="Button" id="btnSubmit" value="Refresh" /> </div>
                   </div>
                   <div class="row">
                       <div class="col-lg-12">
                           <table id="list"></table>
                           <div id="pager"></div>
                       </div>
                       </div>
                   </div>
        
    </div>