diff --git a/module/dept/css/browse.css b/module/dept/css/browse.css
index 2ccff1509d..26901efd33 100644
--- a/module/dept/css/browse.css
+++ b/module/dept/css/browse.css
@@ -1,5 +1,6 @@
 .table.table-form {width: auto;}
-.table-form > tbody > tr > td .form-control + .form-control {margin-top: 5px;}
+.div-depts {margin-bottom: 5px;}
+.clear-margin {margin: 0px;}
 
 .tree li.has-list > .tree-actions > .tree-action[data-type="delete"] {display: none;}
 .tree-toggle {cursor: pointer;}
diff --git a/module/dept/view/browse.html.php b/module/dept/view/browse.html.php
index 93861a70cb..52fd83f60d 100644
--- a/module/dept/view/browse.html.php
+++ b/module/dept/view/browse.html.php
@@ -51,9 +51,9 @@
                 foreach($sons as $sonDept)
                 {
                     if($sonDept->order > $maxOrder) $maxOrder = $sonDept->order;
-                    echo html::input("depts[id$sonDept->id]", $sonDept->name, "class='form-control'");
+                    echo "<div class='div-depts'>" . html::input("depts[id$sonDept->id]", $sonDept->name, "class='form-control'") . "</div>";
                 }
-                for($i = 0; $i < DEPT::NEW_CHILD_COUNT ; $i ++) echo html::input("depts[]", '', "class='form-control'");
+                for($i = 0; $i < DEPT::NEW_CHILD_COUNT ; $i ++) echo "<div class='div-depts'>" . html::input("depts[]", '', "class='form-control'") . "</div>";
                ?>
               </td>
               <td></td>
@@ -170,25 +170,28 @@ $(function()
     });
 
 
-    $("input[name*='depts']").change(function ()
+    $("input[name*='depts']").on('input', function ()
     {
         var depts        = new Array();
         var modifyData   = $(this).val();
         var changedInput = $(this);
 
-        changedInput.wrap('<span>');
-        changedInput.closest('span').addClass('dataField');
+        changedInput.closest('div').addClass('dataField');
 
         $('input[name^="depts"]').not($(this)).each(function()
         {
             if($(this).val()) depts.push($(this).val());
         });
 
-        if(depts.indexOf(modifyData) > -1)
+        if(depts.includes(modifyData))
         {
-            $('.dataField #depts\\[\\]').addClass('intro');
-            $('.intro').css({"margin" : "5px 0px 5px 0px", "display" : "inline", "width" : "50%"});
-            changedInput.after('<span style="padding-left: 15px;color: #1183fb" class="tips">' + repeatDepart + '</span>');
+            changedInput.after('<span style="padding-left: 1px;color: #1183fb" class="tips">' + repeatDepart + '</span>');
+            changedInput.closest('div').addClass('clear-margin');
+        }
+        else
+        {
+            $('.div-depts').removeClass('clear-margin');
+            $('.tips').remove();
         }
     });
 
@@ -196,9 +199,7 @@ $(function()
     {
         if($('.dataField').length)
         {
-            $('.intro').removeAttr('style');
-            $('.intro').unwrap();
-            $('#depts\\[\\]').removeClass('intro');
+            $('.div-depts').removeClass('clear-margin');
             $('.tips').remove();
         }
     });