Как написать логику для TagBar?

const tagList = document.body.querySelector('.categories-list'); 
 
const showSelectionTagFormButton = tagList.querySelector('.add-category'); 
showSelectionTagFormButton.addEventListener('click', showSelectionTagFormButton_clickHandler); 
 
const createTagButton = document.body.querySelector('.choose-btn'); 
createTagButton.addEventListener('click', createTagButton_clickHandler); 
 
function render(template){ 
	let element = document.createElement('div'); 
 
	element.innerHTML = template; 
 
	let result = element.removeChild(element.firstChild); 
 
	return result; 
} 
 
const Template = { 
	tag({title}){ 
		return (` 
			<li class="category selected-category"> 
				${ title } 
				<span class="category-icon delete"></span> 
				</li> 
		`).trim(); 
	} 
} 
function create(data){ 
	let template = Template.tag(data); 
	let tag = render(template); 
 
	initialization(tag); 
 
	tagList.insertBefore(tag, tagList.firstChild); 
 
	return tag; 
} 
function destroy(tag){ 
	uninitialization(tag); 
 
	tagList.removeChild(tag); 
} 
 
function initialization(tag){ 
	tag.addEventListener('click', tag_clickHandler); 
} 
function uninitialization(tag){ 
	tag.removeEventListener('click', tag_clickHandler); 
} 
 
function fill( data ){ 
	for(let currentData of data){ 
		let tag = create( currentData ); 
	} 
} 
function clear(){ 
	let tags = tagList.querySelectorAll('.selected-category'); 
 
	for(tag of tags){ 
		destroy(tag); 
	} 
} 
 
function getCheckboxData(checkboxs){ 
	let data = []; 
 
	for(let checkbox of checkboxs){ 
		data.push({ 
			title: checkbox.dataset.title 
		}) 
	} 
 
	return data; 
} 
 
function showSelectionTagForm(){ 
	document.body.querySelector('#select-category-popup').style.display = "block"; 
	document.body.querySelector('.fa-times').addEventListener('click',hideSelectionTagFormButton_clickHandler); 
} 
function hideSelectionTagForm(){ 
	document.body.querySelector('#select-category-popup').style.display = "none"; 
	document.body.querySelector('.fa-times').removeEventListener('click',hideSelectionTagFormButton_clickHandler); 
} 
 
 
function showSelectionTagFormButton_clickHandler(event){ 
	showSelectionTagForm(); 
} 
 
function hideSelectionTagFormButton_clickHandler(event){ 
	hideSelectionTagForm(); 
} 
 
function createTagButton_clickHandler(event){ 
	let categoryList = document.body.querySelector('.category-list'); 
	let checkboxs = categoryList.querySelectorAll('input[type="checkbox"]:checked'); 
 
	let data = getCheckboxData(checkboxs) 
		.sort( ( a, b ) => a.title - b.title ) 
		.reverse(); 
 
	clear(); 
	fill(data); 
 
	hideSelectionTagForm(); 
} 
 
function tag_clickHandler({target, currentTarget}){ 
	if(target.classList.contains('delete')){ 
		destroy(currentTarget); 
	} 
}

.categories-list { 
  padding: 10px 20px 0 20px; 
  border-bottom: none; 
  list-style: none; 
  font-size: 0; 
  line-height: 0; 
  border: 1px solid #333; 
} 
.categories-list .category { 
  display: inline-block; 
  margin: 0 10px 10px 0; 
  position: relative; 
  border: 1px solid transparent; 
  padding: 6px 32px 4px 10px; 
  font-size: 14px; 
  line-height: 14px; 
  border-radius: 4px; 
  cursor: pointer; 
  -moz-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); 
  -o-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); 
  -webkit-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); 
  transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); 
} 
.categories-list .category.selected-category { 
  background: #eeeeee; 
} 
.categories-list .category .category-icon { 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  width: 32px; 
} 
.categories-list .category .category-icon:after { 
  content: ''; 
  font-family: 'FontAwesome'; 
  font-size: 16px; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  -moz-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); 
  -o-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); 
  -webkit-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); 
  transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); 
} 
.categories-list .category .category-icon.delete:after { 
  content: '\f00d'; 
  padding-bottom: 1px; 
  color: #aaa; 
} 
.categories-list .category .category-icon.add:after { 
  content: '\f067'; 
  padding-top: 1px; 
  color: #000; 
} 
.categories-list .category.add-category { 
  background: #ffe69a; 
} 
.categories-list .category:hover { 
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1); 
} 
.categories-list .category.add-category:hover { 
  border: 1px solid #fbbc25; 
} 
.categories-list .category.selected-category:hover { 
  border: 1px solid #aaa; 
  background: #eeeeee; 
} 
.categories-list .category.selected-category:hover:after {} .categories-list .category .category-icon.delete:hover:after { 
  color: #333; 
} 
.category-list { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
} 
#select-category-popup { 
  position: relative; 
  display: none; 
  width: 200px; 
  margin: 30px auto; 
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5); 
  padding: 20px; 
} 
#select-category-popup .close-modal-window { 
  position: absolute; 
  top: 20px; 
  right: 20px; 
  cursor: pointer; 
} 
.choose-btn { 
  width: 100%; 
  margin-top: 20px; 
  cursor: pointer; 
  display: inline-block; 
  text-align: center; 
  color: red; 
}

<script src="https://use.fontawesome.com/ea0959dcb8.js"></script> 
<ul class="categories-list"> 
  <li class="category add-category"> 
    Add category 
    <span class="category-icon add"></span> 
  </li> 
</ul> 
 
<div id="select-category-popup" class="popup-window"> 
  <a class="close-modal-window"> 
    <i class="fa fa-times" aria-hidden="true"></i> 
  </a> 
  <div class="select-block--container"> 
    <ul class="category-list"> 
      <li class="category-item"> 
        <input id="category-action" type="checkbox" data-title="Action"> 
        <label for="category-action">Action</label> 
      </li> 
      <li class="category-item"> 
        <input id="category-adventure" type="checkbox" data-title="Adventure"> 
        <label for="category-adventure">Adventure</label> 
      </li> 
      <li class="category-item"> 
        <input id="category-card" type="checkbox" data-title="Card"> 
        <label for="category-card">Card</label> 
      </li> 
    </ul> 
 
    <span class="choose-btn">Choose</span> 
  </div> 
</div>