JQuery select list item

I want to select an item from a list once it is clicked ive tried appending classes and things like that but the click event doesnt seem to recognise the list items, the items also need be able to be deleted later so i think giving them classes is the best option for this scenario here is my code:

function newElement() {
  $(document).ready(function() {
    $("UL").append($("<li>").html($("input").val()).addClass("Item"));
  });

};

$(".item").click(function() {
  var $items = $('li'),
    $selected = $items.filter('.selected').removeClass('selected'),
    $next;
  // first time only when no selected exists, remove if you automatically select first one
  if (!$selected.length) {
    $next = $items.first();
  } else {
    $next = $selected.is($items.last()) ? $items.first() : $selected.next();
  }

  $next.addClass('selected')

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="div1" class="header">
  <input type="text" id="input" placeholder="...">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>

<ul id="UL" class="nyList">
  <li class="item">blank 1</li>
  <li class="item">blank 2</li>
  <li class="item">blank 3</li>
</ul>