Create a system to add product tags in Javascript

Question

I am developing my own E-Commerce. I want to create an interface like the one shown in the image to add tags to a product. I want that when the tag is added, it is displayed as the image.

Image link

Please, could you tell me some way to try to solve this problem? Some tips or examples to achieve it with HTML or Javascript.

Answer 1

I'm not sure this is what you need but it's something you can start from.

$( "#add" ).click(function() {
  var x = document.getElementById("tags");
  var li = document.createElement("LI");
  var a = document.createElement("A");
  var temp=x.appendChild(li);
  temp=temp.appendChild(a);
  temp.innerHTML=document.getElementById("name").value;
  temp.setAttribute("class","tag");
});

body {
  font: 12px/1.5 'PT Sans', serif;
  margin: 25px;
}

.tags {
  list-style: none;
  margin: 0;
  overflow: hidden; 
  padding: 0;
}

.tags li {
  float: left; 
}

.tag {
  background: #eee;
  border-radius: 3px 0 0 3px;
  color: #999;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tag::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.tag::after {
  background: #fff;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #eee;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tag:hover {
  background-color: crimson;
  color: white;
}

.tag:hover::after {
   border-left-color: crimson; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Tags</h1>
<input type="text" id="name" name="name" >
<button id="add">Add</button>


<h2>Example</h2>
<ul id="tags" class="tags">
  <li><a href="#" class="tag">HTML</a></li>
  <li><a href="#" class="tag">CSS</a></li>
  <li><a href="#" class="tag">JavaScript</a></li>
</ul>