How to make select2 type of buttons for inserted values in the text box

I have a search text box in which I can add multiple values from the result. The added values are space separated. I want to make them more like select2 blocks. Each value will have a box inside the text field. If the values doesn't fit in the same line then it should add them in the next line in the same text box. Something like the following:

enter image description here

Here is the jsfiddle of how I get the values in the textfield:

https://jsfiddle.net/oan4pb8z/

Here is the snippet:

<body>
Name: <input type="text" id="myText" value="Name1">
Name: <input type="text" id="myText1" value="" placeholder="Type and hit add">
<p>Type in the 'Type and hit add' and click 'Add'</p>
<button onclick="myFunction()">Add</button>

<script>
function myFunction() {
  var value = document.getElementById("myText1").value;
  document.getElementById("myText").value = document.getElementById("myText").value + " "+ value;

}
</script>

</body>

Thanks!