If a tag already exists it will not add another same tag. What is the code for it and where should I place the code?

HTML

Code:
<!DOCTYPE html>

<html>

<link rel="stylesheet" type="text/css" href="style.css"/>

<body>

<!--
<div class="tags-input" data-name="tags-input">

<span class="tag">HTML<span class="close"></span></span>

<span class="tag">CSS<span class="close"></span></span>

<span class="tag">JAVASCRIPT<span class="close"></span></span>

<input type="hidden" name="tags-input"/>

<input type="text" class="main-input"/>

</div>
-->


<script>
var i;

var tags=[];

var close=document.getElementsByClassName("close");

for(i=0; i<close.length; i++){

close[i].onclick=function(){

this.parentElement.style.display="none";

}

}

var div=document.createElement("DIV");

document.body.appendChild(div);

div.className="tags-input";

var maininput=document.createElement("INPUT");

var hiddeninput=document.createElement("INPUT");

div.appendChild(maininput);

maininput.setAttribute("type", "text");

maininput.setAttribute("class", "main-input");

div.appendChild(hiddeninput);

hiddeninput.setAttribute("type", "hidden");

hiddeninput.setAttribute("name", "tags-input");

maininput.addEventListener("input", function(t){

var enteredTags=maininput.value.split(",");

if(enteredTags.length>1){

maininput.value="";

enteredTags.forEach(function(t){

var filter=filterTag(t);

if(filter.length>0){

addTag(filter);

}

});

}

});

maininput.addEventListener('keydown', function(e){

var keyCode = e.which || e.keyCode;

if(keyCode===8 && maininput.value.length===0 && tags.length>0) {

removeTag(tags.length - 1);

}

});

addTag("HTML");

function addTag(text){

var tag={

text: text,

element: document.createElement("SPAN")

};

tag.element.className="tag";

tag.element.textContent=text;

var span2=document.createElement("SPAN");

span2.className="close";

var cl=tag.element.appendChild(span2);

tags.push(tag);

span2.addEventListener("click", function(){

this.parentElement.style.display="none";

removeTag();

});

div.insertBefore(tag.element, maininput);

refreshTag()

}

function removeTag(index){

var tagIndx=tags[index];

tags.splice(index, 1);

div.removeChild(tagIndx.element);

refreshTag()

}

function refreshTag(){

var taglist=[];

tags.forEach(function(t){

taglist.push(t.text);

});

hiddeninput.value=taglist.join(",");

}

function filterTag(tag){

return tag.replace(/[^\w -]/g, "").trim().replace(/\W+/g, "-");

}


</script>

</body>

</html>
CSS

Code:

.tags-input{
            display:inline-block;
			border:1px solid green;
		   }

.main-input{
            padding:10px;
			border:none;
			outline:none;
		   }

.tag{
     padding:4px;
	 padding-left:10px;
	 padding-right:20px;
	 background:#ddd;
	 color:black;
	 display:inline-block;
	 margin-right:5px;
	 user-select:none;
	}
	
.tag:first-child{
                 margin-left:5px;
				}	
	
.tag:hover{
           background:#2196f3;
		   color:white; 
		  }
	  
.close::after{
	         content:"x";
	         position:absolute;
	         padding:3.5px;
			 margin-top:-5px;
	         cursor:pointer;
			 user-select:none;
			 margin-left:2px;
	         }
	 
.close:hover::after{
		           color:gray; 
		           }