JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<input type="text" name="names" class="names" value="Luke###Chris">
<div class="output">

</div>
<hr />
<input type="text" name="new_name" class="new_name" value="">&nbsp;
<button class="add">Add</button>

CSS

.output {
  margin-top: 6px;
  border: solid 1px #666;
  min-height: 40px;
  width: 50%;
}

.names {
  width: 98%;
}

JavaScript

function real_name_already_exists(name) {
  let names = $('.names').val().split('###');

  return names.includes(name);
}

function add_real_name_to_list(name) {
  if (real_name_already_exists(name)) {
    return;
  }

  let names = $('.names').val().split('###');

	names.push(name);

$('.names').val(names.join('###'));
}

$('.add').click(function() {
  let newName = $('.new_name').val();

  add_real_name_to_list(newName);

  $('.new_name').val('');
});