Tagify Input (JS plugin [converts input text into tags])

HTML

<main class="c-main">
   <h1>Type text &amp; convert it into tag</h1>
   <h2>(Use keyboard keys: Enter, "," or on input blur)</h2>
    <input type="text" id="tagInp" required />

    <button type="button" class="o-btn o-btn--serialize c-main__btn" id="ser-btn" title="click to see serialized value of tags">Serialize</button>

    <button type="button" class="o-btn o-btn--destroy  c-main__btn" id="destroy-btn" title="click to destroy tagify input and reveal original one">Destroy Tagify</button>

   <h3>Serialized Tags' value</h3>
    <output class="o-result-view c-main__result-view" id="output"></output>
</main>

CSS

HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
  background: rgb(254, 255, 255);
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}


/*Actual Style for Tagify UI*/

/*.o- prefix is for object it means this object can be used in different places across the project [https://codepen.io/Konrud/pen/dRyVpY]*/

.o-tagify {
  border: 1px solid rgb(175, 172, 172);
  border-radius: .1rem;
}

.o-tagify INPUT {
  padding: .5rem 0 .5rem .15rem;
  margin-bottom: .1rem;
  border: 0;
  background: rgb(252, 252, 252);
}

.o-tagify__item {
  position: relative;
  display: inline-block;
  margin: 0 .2rem .2rem;
  padding: .1rem 1.5rem .1rem .4rem;
  vertical-align: middle;
  border: 1px solid cornflowerblue;
  border-radius: .2rem;
  background: cornflowerblue;
  color: #fff;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
}

.o-tagify__btn {
  position: absolute;
  right: 0; top: 50%;
  padding: 0 .4rem;
  transform: translateY(-50%);
  border: 0;
  font-size: 1.1rem;
  color: rgb(18, 78, 106);
  background: none;
  cursor: pointer;
}

.is-focused {
  background: rgb(215, 119, 119);
}







/*Other, NOT RELATED, page UI*/

H1, H2, H3 {
  margin-top: 0;
  color: rgb(78, 85, 87);
}

MAIN {
  min-width: 320px;
  max-width: 980px;
  margin: 1rem auto;
}

MAIN .o-tagify {
  margin-bottom: 3rem;
}

.o-btn {
  padding: .75rem 1.5rem;
  border: 1px solid rgb(190, 201, 206);
  border-radius: .2rem;
  font-size: 1.1rem;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .2);
  background: none;
  cursor: pointer;
  transition: transform .3s ease;
}

.o-btn:active {
  box-shadow: 0;
  transform: translateY(1px);
}

.c-main__btn {
 margin-right: 1.5rem;
 margin-bottom: 3rem; 
}

.o-btn--serialize {
  background: rgb(107, 145, 213);
  color:...

JavaScript

;(function(ns) { // ns - namesapce into which tagify function should be set (in our case it is window)
  "use strict";
  
  /*
    DESCRIPTION: 
    Provides stylized input field that creates tags from inputted text. 
    Plugin returns single function that applies tag feature on received INPUT element (original input element will be hidden).
    Various options for this plugin can be set.
    Function returns object for the further usage
  */   
  
  let container, tagifyInput, focusedTag;
  /// HTML element that will be used as tag
  const TAG_ELEMENT = "span";
  /// tag item's close button's content (may be HTML)
  const TAG_BUTTON_CONTENT = "x";
  
  const KEYCODE = {
    "BACKSPACE": ["Backspace", 8],
    "DELETE": ["Delete", 46]
  };
  
  const defaultOptions = {
    // * What user can type to complete tag. We're using KeyboardEvent.key & KeyboardEvent.keyCode codes.
    delimeters: ["Enter", ",", 13 /*Enter*/, 188 /*Comma in English*/, 222 /*comma in Hebrew*/, 44 /*comma in English/Hebrew in keypress event*/], 
    // * Delimeter for tag items value as string representation (is used in serialize function)
    outputDelimeter: ",",
    // * Class for tagify container (for styling)
    containerClass: "o-tagify",
    // * Class for tagify items (tags) (for styling)
    tagClass: "o-tagify__item",
    // * Class for tagify item (tag) when it's focused before being removed
    tagFocusClass: "is-focused", 
    // * Class for tagify tag close button (for styling)
    tagBtnClass: "o-tagify__btn",
    // * Placeholder text for tagify input
    tagPrompt: "add tags",
    // * Type for inner tagify input [by default will be taken from the original input]
    inputType: null,
    // * Array of attributes which should be copied from the original input
    copyAttributes: [],
    // * Whether tag should be added onblur
    addTagOnBlur: false
  };
  
  /// object which will be returned to the user for further usage
  const tagifyObj = {
    orgInput: null, //...