add tags finished

www/index.html

                     </td>
                     <td>
                       <div class="btn-group" role="group">
-                        <button type="button" class="btn btn-primary autodoc_tag_color" data="autodoc_tag_color_primary">
-                          <span class="autodoc_tag_btn_on d-none">
+                        <button type="button" class="btn btn-primary autodoc_tag_color active" data="autodoc_tag_color_primary">
+                          <span class="autodoc_tag_btn_on">
                             <i class="fas fa-check"></i>
                           </span>
-                          <span class="autodoc_tag_btn_off">
+                          <span class="autodoc_tag_btn_off d-none">
                             <i class="fas fa-times"></i>
                           </span>
                         </button>
                       -->
                     </td>
                     <td>
-                      <span id="autodoc_tag_result" class="badge"></span>
+                      <span id="autodoc_tag_result" class="badge badge-primary"></span>
                     </td>
                     <td>
                       <button type="button" class="btn btn-outline-primary">Add Tag</button>

www/js/autodoc.js

 
 $(document).ready(function () {
 
+  // load the current page based on anchor
   change_page();
+
+  // initialise drop zone
   upload_zone_init();
 
+  // main page scroll event
   $(document).scroll(function () {
     page_home_scroll();
   });
 
+  // modal left paging
   $('#autodoc_home_modal_left').mouseenter(function (e) {
     $(e.target).fadeTo("slow", 0.8);
   })
       home_modal_page_prev();
     });
 
-  $('#autodoc_home_modal_right').mouseenter(function (e) {
-    $(e.target).fadeTo("slow", 0.8);
-  })
+  // modal right paging
+  $('#autodoc_home_modal_right')
+    .mouseenter(function (e) {
+      $(e.target).fadeTo("slow", 0.8);
+    })
     .mouseleave(function (e) {
       $(e.target).fadeTo("slow", 0.15);
     })
       home_modal_page_next();
     });
 
-  $('.autodoc_home_modal_size').click(function(e) {
+  // modal resize buttons events
+  $('.autodoc_home_modal_size').click(function (e) {
     $('.autodoc_home_modal_size').removeClass("active");
     $(e.target).addClass("active");
     home_modal_resize($(e.target).html());
-    });
+  });
 
-  $('span.autodoc_home_modal_name').click(function(e) {
+  // click to rename page in modal
+  $('span.autodoc_home_modal_name').click(function (e) {
     $(e.target).addClass('d-none');
     $('input.autodoc_home_modal_name').removeClass('d-none');
   });
 
-  $('input.autodoc_home_modal_name').change(function(e) {
+  // [enter] event of modal name edit
+  $('input.autodoc_home_modal_name').change(function (e) {
     var docid = $('#autodoc_home_modal').data('documentid');
     document_update_name(docid, $(e.target).val(), docid);
   });
 
-  $('.autodoc_tag_color').click(function(e) {
+  // tag add color events
+  $('.autodoc_tag_color').click(function (e) {
     var btn = e.target;
-    while($(btn).prop("tagName") != "BUTTON") {
-      console.log(btn);
+    while ($(btn).prop("tagName") != "BUTTON") {
       btn = $(btn).parent();
     }
 
 
     $(btn).children('.autodoc_tag_btn_on').removeClass('d-none');
     $(btn).children('.autodoc_tag_btn_off').addClass('d-none');
-    
 
-    $(btn).parent().children().each(function(id,x) {
+
+    $(btn).parent().children().each(function (id, x) {
       var myclass = 'badge-' + $(x).attr('data').split('_').pop();
       $('#autodoc_tag_result').removeClass(myclass);
     });
 
   });
 
-  $('.NOPE_autodoc_tag_color').click(function(e) {
-    
-    $(e.target).parent().children().html('0');
-    $(e.target).html('1');
-    
-    $(e.target).parent().children().each(function(id, x) {
-      console.log(x);
-      console.log($(x).attr('data'));
-      $("#autodoc_tag_result").removeClass("badge-" + $(x).attr('data'));
-    });
-  
-    $("#autodoc_tag_result").addClass("badge-" + $(e.target).attr('data'));
-    return false;
-  })
-
-  $('.autodoc_tag_text').keyup(function(e) {
+  // tag add text events
+  $('.autodoc_tag_text').keyup(function (e) {
     $('#autodoc_tag_result').html($(e.target).val());
   });
 });
 
+
+// anchor change event
 $(window).bind("hashchange", function () {
   change_page();
 });
         $(col)
           .find(".autodoc_template_home_name")
           .html(doc.name);
-        
+
         $(col)
           .find(".autodoc_template_home_pages")
           .html(doc.pageId.length);
   var doc = $('#autodoc_home_modal').data('document');
   var pageTotal = doc.pageId.length;
 
-  if ( pageNum < 0 ) {
-    pageNum=pageTotal-1;
+  if (pageNum < 0) {
+    pageNum = pageTotal - 1;
   }
 
-  if ( pageNum > pageTotal - 1 ) {
+  if (pageNum > pageTotal - 1) {
     pageNum = 0;
   }
 
-  $('.autodoc_home_modal_page').html(pageNum+1);
+  $('.autodoc_home_modal_page').html(pageNum + 1);
   $('#autodoc_home_modal').data('pageNum', pageNum);
 
   $('#autodoc_home_modal_img').attr('src',
 
 function home_modal_resize(size) {
   var newclass;
-  
+
   $('#autodoc_home_modal').children().removeClass('modal-sm modal-lg modal-xl');
-  
-  switch(size) {
+
+  switch (size) {
     case "S": newclass = "modal-sm"; break;
     case "M": break;
     case "L": newclass = "modal-lg"; break;
     case "XL": newclass = "modal-xl"; break;
   }
 
-  if ( newclass ) {
+  if (newclass) {
     $('#autodoc_home_modal').children().addClass(newclass);
   }
 }
   $.ajax({
     type: "PATCH",
     url: conf.openapi + "/documents/" + docid + "?name=" + encodeURIComponent(name),
-    success: function(data) {
+    success: function (data) {
       $('span.autodoc_home_modal_name').removeClass('d-none');
       $('input.autodoc_home_modal_name').addClass('d-none');
       home_modal_open(docid);