Dynamically generated content disappearing

Dynamically generated content disappearing

I've created a small application to swap divs.
The user can create a div manually by entering a value in the input field or by clicking on the add button.
In both the cases, the following conditions are supposed to be met.

1. All the divs should append to the parent div with class container. - working
2. If a child div with class box is already present under class container, the new div with class box should add after the already available div i.e should act as a sibling to the already available div with class box. - working
3. It should be possible to swap the divs with class box by clicking on top & down. - working
4. The top button for the 1st div with class box should be disabled, since it will not have a top sibling to swap with. - working
5. The down button for the last div with class box should be disabled, since it will not have a down sibling to swap with. - working
6. The content added using the form by entering a value in the input field should also get added to the parent div as mentioned in 1. - not working
7. Delete each of the divs when delete button is clicked on. - not working

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <style>
  6.             .box {
  7.                 height: 25%;
  8.                 width: 90%;
  9.                 padding: 1%;
  10.                 margin-left: 1%;
  11.                 margin-top: 1%;
  12.                 border: 1px solid black;
  13.                
  14.             }
  15.            
  16.             .box:nth-child(odd){
  17.                 background: skyblue;
  18.             }
  19.            
  20.             .box:nth-child(even){
  21.                 background: green;
  22.             }
  23.            
  24.             .disabled-btn {
  25.               cursor: not-allowed;
  26.               opacity: 0.25%;
  27.             }
  28.            
  29.         </style>
  30.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  31.        
  32.     </head>
  33.     <body>
  34.    
  35.     <button class="add" onclick="addDiv()">Add</button>
  36.         <form>
  37.             <input type="text" id="myCount">
  38.             <button type="submit" onclick="addDiv2()">Submit</button>
  39.         </form>
  40.         <div class="container">
  41.            
  42.         </div>
  43.        
  44.    
  45.     <script>
  46.         content = "";   
  47.         var count=0;
  48.         function addDiv(){
  49.             while(count<5){
  50.                 content+= '<div class="box"><p>'+count+'</p><button class="top">Top</button><button class="down">Down</button><button class="removeMe">Delete</button></div>';
  51.                 count++;
  52.             }
  53.             $('.container').html(content);
  54.            
  55.             resetEvents();
  56.         }
  57.        
  58.        
  59.         function addDiv2(){
  60.             var count = $("#myCount").val();
  61.             content+= '<div class="box"><p>'+count+'</p><button class="top">Top</button><button class="down">Down</button><button class="removeMe">Delete</button></div>';
  62.             $('.container').html(content);
  63.             resetEvents();
  64.         }
  65.          
  66.         $(".removeMe").click(function(){
  67.             $(this).parents('.box').remove();
  68.         });
  69.            
  70.         function handleEvents() {
  71.             $(".top, .down").prop("disabled", false);
  72.            
  73.             $(".box:first").find(".top").prop("disabled", true);
  74.            
  75.             $(".box:last").find(".down").prop("disabled", true);
  76.         }
  77.         function resetEvents() {
  78.             $(".top, .down").unbind('click');
  79.             handleEvents();
  80.             $('.down').click(function() {
  81.               var toMove1 = $(this).parents('.box');
  82.               $(toMove1).insertAfter($(toMove1).next());
  83.               handleEvents();
  84.             });
  85.             $('.top').click(function() {
  86.               var toMove1 = $(this).parents('.box');
  87.               $(toMove1).insertBefore($(toMove1).prev());
  88.               handleEvents();
  89.             });
  90.         }
  91.        
  92.     </script>
  93.     </body>
  94.    
  95. </html>

All the conditions mentioned above are met except the 6th & 7th one.
The delete button is not working.
The div disappears as soon as it gets added.
Also, is there anything that needs to be optimized in the code? Do I need to use event delegation to disable the dynamically generated top & down buttons for the first and last divs? If yes, how do I do that?