JSFiddle - React, Tailwind, and code Playground

by Jehuty

HTML

<div class="name-form js-name-form">
  <div class="name-form-control">
    <input type="text" class="js-name-form__input name-form__input">
  </div>
  <div class="name-form-control">
    <button class="js-name-form__add name-form__btn">Add</button>
  </div>
  <div class="name-form-control">
    <ul class="js-name-results">
    </ul>
  </div>
</div>

SCSS

.name-form {
  &-control + &-control {
    margin-top: 10px;
    white-space: prewrap;
  }

  &__input {
    display: inline-block;
    font-size: 13px;
  }

  &__removebtn {
    padding: 1px 3px;
    display: inline-block;
    line-height: 16px;
    font-size: 13px;
    margin-left: 5px;
  }
}

JavaScript

const form = document.querySelector('.js-name-form');
const addBtn = form.querySelector('.js-name-form__add');
const nameResults = form.querySelector('.js-name-results');
const nameInput = form.querySelector('.js-name-form__input')
const names = [];

function addName() {
	const name = nameInput.value;
  if (name == '') return;
  while (nameResults.firstChild) {
    nameResults.removeChild(nameResults.firstChild);
	}
  names.push(name);
  names.sort().forEach((name) => {
  	const item = document.createElement('li');
    const itemName = document.createElement('span');
    const itemRemoveBtn = document.createElement('button');
    itemRemoveBtn.classList.add('js-name-form-removebtn');
    itemRemoveBtn.classList.add('name-form__removebtn')
    itemRemoveBtn.setAttribute('data-name', name);
    itemName.innerHTML = name;
    itemRemoveBtn.innerHTML = 'âś•';
    item.appendChild(itemName);
    item.appendChild(itemRemoveBtn);
  	nameResults.appendChild(item);
  })
	nameInput.value = '';
  nameInput.focus();
}

addBtn.addEventListener('click', addName)

document.addEventListener('click', (e) => {
	if (e.target && e.target.classList.contains('js-name-form-removebtn')) {
  	const btn = e.target;
    names.splice(names.indexOf(btn.getAttribute('data-name')), 1);
    btn.parentNode.parentNode.removeChild(btn.parentNode);
  }
})

document.addEventListener('keypress', (e) => {
	if (e.target && e.target.classList.contains('js-name-form__input')) {
    const key = e.which || e.keyCode;
  	if (key === 13) {
    	addName();
    }                 
  }
})